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

【问题标题】：array.map is not a function, reactjs setState errorarray.map 不是函数，reactjs setState 错误
【发布时间】：2021-06-01 18:21:13
【问题描述】：

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

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

【问题讨论】：

看起来你只是想做setBlogs(res.data.result)。你为什么要循环它？每次 forEach 迭代时，您都会用一个单独的博客覆盖状态。

标签： arrays reactjs react-hooks use-state

【解决方案1】：

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

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

【讨论】：

【解决方案2】：

既然 blogArray 已经是一个数组，你应该可以这样做：

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

并至少跳过第二个循环。

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


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

【讨论】：

感谢您的回复:)。这可能是解决方案之一。