array.map 不是 function，reactjs setState 错误

Question

After setting the state reactJs comes up with an error blogs.map is not a function. How do I convert blogs into arrays, although it is initialized as an array.

  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

You should not call setBlogs method multiple times. Instead aggregate all the data and set it once

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

Answer 2

Since blogArray already is an array you should be able to do:

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

and skip at least the second loop.

Now I can imagine you might want to modify the data before setting it to state in that case I would recommend not using forEach like your code but map (at least for the nested loop). Which would look like this.

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