TypeError：posts.map 不是 Reactjs 中的函数，同时使用 useEffect 钩子从 API 获取数据-解网

问：

import React ，{useState，useEffect} from 'react'; 从 'axios' 导入 axios;

函数 DataFetching（） {

const[posts,setPosts]= useState([])

useEffect(()=>{

    axios.get('https://reqres.in/api/users')
    .then(res=>{

        console.log(res)
        setPosts(res.data)
    })
    .catch(err=>
        console.log(err) )

},[])
return (
    <div>
      
        <ul>
            {
          **  posts.map(post=><li key={post.id}>{post.email}</li>)**
            }
        </ul>
        
    </div>
);

}

导出默认 DataFetching;

数据成功存储在钩子中，但 map 函数出现错误：Posts.map 不是函数

我尝试过Object.values（posts）.map，但它不起作用

reactjs 数组 react-hooks

  useEffect(() => {

    const fetchData = async () => {
      try {
        const response = await axios.get('https://reqres.in/api/users');
        if (response.status === 200) {
          const data = response.data;
          console.log(data);
          setPosts(data);
        } else {
          throw new Error('Network error occured.');
        }
      } catch (error) {
        console.error('Error occured while fetching data: ', error);
      }
    };

    fetchData();
  }, []);

StackBlitz 示例

TypeError：posts.map 不是 Reactjs 中的函数，同时使用 useEffect 钩子从 API 获取数据

TypeError: posts.map is not a function in Reactjs while fetching data from an API using useEffect hook

评论

评论