Question

array.map 不是函数 reactJS

2020-07-02

346

reactjs redux react-hooks

每当我尝试从 Reducer 使用 useDispatch() 函数时，我的组件内部都会再次出现错误。

这是我的 Reducer，我用它从 DB 获取所有项目并将其显示在页面上。

export const getPost = (posts : any ) => {


 return {
        type : actionTypes.GET_POSTS,
        posts
    }
}

这是我在组件中的 useEffect :

    useEffect(() => {
    axios
        .get('http://localhost:4000/getPost')
        .then((res) => {
            // dispatch(actions.getPost({posts : res.data}))
            console.log('--------res', res.data);
        })
        .catch((err) => {
            console.log('--------err', err);

        })
})

错误弹出到我的 map 方法上：

 <div id="posts">
            <ul>
                {posts.map((items : any) => {
                    return <li key={uuidv4()} onClick={() => history.push('/postsOnPage')}>{items.title}</li>
                })}
            </ul>
        </div>

错误本身说明： posts.map 不是函数 这就是帖子： let posts : any = useSelector((state : any) => state.posts);

有什么建议吗？

Answer 1

尝试：

<div id="posts">
  <ul>
    {Array.isArray(posts) && posts.map((items : any) => {
      return (
        <li
          key={uuidv4()}
          onClick={() => history.push('/postsOnPage')}
         >
           {items.title}
         </li>
      )
     })}
  </ul>
</div>

Answer 2

可能是因为 posts 具有非数组值（ undefined 、 null 等），而 API 还未获取数据。

您可以通过先检查 posts 的值然后运行映射或将 posts 的初始值设置为空数组来防止该错误。

<div id="posts">
        <ul>
         {/*Only run the map when posts exists and has the length > 0*/}
            {posts && posts.length > 0 && posts.map((items : any) => {
                return <li key={uuidv4()} onClick={() => history.push('/postsOnPage')}>{items.title}</li>
            })}
        </ul>
    </div>