array.forEach 不是函数

Question

我正在显示从 api 调用接收到的对象数组。我正在使用 react hooks。当我尝试遍历对象数组时，它返回的 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
   }   
]

Answer 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>

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