array.map不是函数，reactjs setState错误

Question

设置状态后，reactJs 出现错误 blogs.map 不是函数。我如何将博客转换为数组，尽管它被初始化为数组。

  const [blogs,setBlogs] = useState([]);
  useEffect(async() => {
        await axios.get(`${API_URL}/api/getblogs`,{
          headers: {
            'Content-Type': 'application/json',
            'Accept': 'application/json',
            'Access-Control-Allow-Origin': '*'
        }
        })
        .then((res)=>{
          res.data.result.forEach(element => {
            element.blogArray.forEach((b)=>{
             // console.log(b);
              setBlogs(b);
            })
          });
          
        })
        .catch((err)=>{
          console.log(err)
         
        })
      }, []);
    

      useEffect(()=>{
          console.log(blogs)
      },[blogs]);

return(
     <div className="row">
              {
                
                blogs &&
                blogs.map((blog)=>{
                  return (
                    
                   <Cardschema key={Math.random()}/>
                  )
                  
                })
                
              }
              </div>
)

Answer 1

您不应多次调用 setBlogs 方法。而是聚合所有数据并设置一次

.then((res)=>{
     var blogs = []
     res.data.result.forEach(element => {
            element.blogArray.forEach((b)=>{
                 // console.log(b);
                 blogs.push(b);
            });
     });
     setBlogs(blogs);          
});

Answer 2

由于 blogArray 已经是一个数组，您应该可以这样做：

setBlogs([...blogs, ...blogArray])

并至少跳过第二个循环。

现在我可以想象您可能希望在将数据设置为 state 之前修改数据，在这种情况下，我建议不要像您的代码那样使用 forEach，而是使用 map（至少对于嵌套循环）。看起来像这样。


const formattedBlogrray = element.blogArray.map((blog)=> {
   // do formatting
   return {
      ...formattedBlog,
      
   }
});
setBlogs([...blogs, ...formattedBlogArray])

array.map不是函数，reactjs setState错误

array.map is not a function, reactjs setState error

arrays

reactjs

react-hooks

use-state