react js - announcements.map is not a function

8 浏览
0 Comments

react js - announcements.map is not a function

我不知道我在这里做错了什么，我一直像这样使用map，我该如何解决这个问题？

我需要从API中获取最后5个公告，我该如何做到这一点？请帮帮我，我很困惑。

JSON文件如下：

{

"announcements": [

{

"id": 647,

"title": "لیست اساتید راهنمای دانشجویان گروه عمران",

"content": "list of civil engineering student guides of Khyam University (17/07/1400)
\r\n
\r\n\t\t\t
\r\nCivil Engineering 1400\t\tDr. Kivan Bina
\r\nCivil Engineering 99\t\tDr. Armin Jirahi
\r\nCivil Engineering 98\t\tDr. Morteza Sheikhi
\r\nCivil Engineering 97 and before\tDr. Amirhossein Kiyani
\r\nSurveying\tAll entrants\tDr. Kivan Bina
\r\nMaster of Structural Engineering\tAll entrants\tDr. Morteza Sheikhi
\r\nMaster of Hydraulic Structures\tAll entrants\tDr. Kivan Bina
\r\nMaster of Roads and Transportation\tAll entrants\tDr. Armin Jirahi
\r\nMaster of Natural Disaster Engineering\tAll entrants\tDr. Kivan Bina
\r\n
\r\nRespected students are requested to refer to their educational guide teacher with the relevant curriculum chart in order to receive guidance for selecting, deleting or adding courses before the start of the semester and during course selection.
\r\n",

"isImportant": false

},

{

"id": 675,

"title": "تشکر ریاست محترم دانشگاه از کارمندان جهت پایان پذیرفتن امتحانات پایان ترم نیمسال اول",

"content": "Thanks to the honorable university administration for accepting the end-of-semester exams for the first semester
",

"isImportant": false

}

],

"pagination": {

"total": 212,

"lastPage": 106,

"perPage": 2,

"currentPage": 106,

"from": 210,

"to": 212

}

}

组件事件代码：

import React, { useState, useEffect } from 'react'
function Events() {
    const [announcements, fetchannouncements] = useState([]);
    const getData = () => {
        fetch('https://api.example.com')
          .then((res) => res.json())
          .then((res) => {
            console.log(res)
            fetchannouncements(res)
          })
      }
      useEffect(() => {
        getData()
      }, [])
    return (
        

        
رویداد ها

        
          
                
        
اطلاعیه ها

          آرشیو کامل اطلاعیه ها
          {announcements.map((info) =>  {
              return (
                  

                     {info.title}
                
                  
                    

                      05
                    بهمن / فرهنگی 
                  
              );
            })}
                

                  برگزاري آزمون آزمايشي
              
                
                  

                    05
                  بهمن / فرهنگی 
                
                

                  نخسین جایزه جوان نوآور ماندگار
              
                
                  

                    05
                  بهمن / فرهنگی 
                
                

                  اولین سالگرد سردار دلها
              
                
                  

                    05
                  بهمن / فرهنگی 
                
                

                  امتحانات پایان ترم اول 
                  سال تحصیلی ۱۴۰۰-۱۳۹۹
              
                
                  

                    05
                  بهمن / فرهنگی 
                
        
        
  

    );
  }
  export default Events;

控制台给我返回了JSON文件的结果，但是React报错说.map不是一个函数。

0

2 答案

0 Comments

这个错误是由于announcements不是一个数组导致的。

尝试用以下代码替换你的getData函数：

const getData = () => {
    fetch('https://api.example.com')
      .then((res) => res.json())
      .then((res) => {
        console.log(res);
        fetchannouncements(res?.announcements);
      });
  };

0
0 Comments

当在react js中使用map函数时，出现了"announcements.map is not a function"的错误。这个错误的原因是无法对一个对象进行map操作，因此需要将res对象中的announcements属性提取出来，然后使用map函数进行操作。解决方法是在fetchannouncements函数中将res替换为res.announcements。

下面是修改后的代码示例：

const getData = () => {
  fetch('https://api.example.com')
    .then((res) => res.json())
    .then((res) => {
      console.log(res.announcements)
      fetchannouncements(res.announcements)
    })
}

0