array.forEach 不是函数答案

【问题标题】：array.forEach is not a functionarray.forEach 不是函数
【发布时间】：2020-02-07 20:11:27
【问题描述】：

我正在显示从 api 调用接收到的对象数组。我正在使用反应钩子。当我尝试遍历对象数组时，它返回的 foreach 不是一个函数。为此我可以使用 await 和 async。

function searchArticle() {

    const [articleList, setArticleList] = useState([]); 
    const { articleApiStatus, articleCurrentPage, searcArticle } = state;
    useEffect(() => {
        setArticleList(state.articleList);
        articleListApiCall(articleCurrentPage);
    }, [])

    const articleListApiCall = (page = 1) => {
        const isNewPage = articleCurrentPage !== page;
        if (!articleApiStatus || isNewPage) {
            getArticleList(page, '')
        }
    }
    const getArticleList = async (page, searchkey) => {
         const requestBody = {
            page: page - 1, searchkey
        }
        await onArticleSearchPost(requestBody).then(articleresult => {
            setArticleList(articleresult);          
        }).catch(err => {
            console.log(err);
        })
    }   
    return (
        <React.Fragment>
            <div className="article-section">
              <div className="search-result">
                <Collapse  >
                {
                        articleList.forEach(element => {
                        <Panel header={element.article_title} key={element._id}>
                          <p>{element.article_body}</p>
                        </Panel>
                        })
                }
              </div>
              <div className="pagination-section">
                  <Pagination defaultCurrent={1} total={50} />
              </div>
            </div>                
        </React.Fragment>
    )
}
export default searchArticle;

编辑：我从 api 调用接收以下数据

[ 
   {       
      "_id":"5d9efbc3b29b2876700adf6f",
      "postedBy":"Admin",
      "datePosted":"1570700227888",      
      "__v":0
   }   
]

【问题讨论】：

你应该等待检查 articleList 是否不为空，例如： articleList && articleList.forEach(element => {
{element.article_body}
})
stackoverflow.com/questions/53275405/… 勾选这个，和你的问题类似

标签： reactjs next.js

【解决方案1】：

首先，不要使用forEach来渲染JSX，这样不行。请改用map：

<Collapse>
  {articleList.map(element => { // use map
    return (
      <Panel header={element.article_title} key={element._id}>
        <p>{element.article_body}</p>
      </Panel>
    );
  })}
</Collapse>

其次，确保您在useEffect 中设置的state.articleList 是一个实际数组。

【讨论】：

我敢打赌state.articleList 也不是数组。
它的返回对象
@Karthi map 和 forEach 是数组方法，它们不会在对象上运行。您可以尝试先将其转换为数组，提取数组属性或使用Object.keys() 之类的smth 对其进行迭代。
我需要知道你得到的对象的结构。
@Karthi 这是一个数组，而不是一个对象，地图应该可以在上面工作。