如何使用 useEffect 获取数据？答案

【问题标题】：how to fetch data with useEffect?如何使用 useEffect 获取数据？
【发布时间】：2021-02-11 01:33:32
【问题描述】：

我在获取数据时遇到问题，但我不知道是什么问题。请看下面的代码

import React from 'react'

const App = () => {

  const [avatar, setAvatar] = React.useState([]);

  React.useEffect(() => {
   
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((response) => response.json())
      .then((data) => setAvatar(data.name))
      .catch((error) => console.error("Error fetching data: ", error));
  }, []);

  return <div> 

      {avatar.map(item => (
        <p> {item.name} </p>
      ))}

     </div>;
};

export default App;

谢谢！

【问题讨论】：

链接代码的问题是，当你删除codesandbox链接的那一刻，这个页面就变得毫无用处了。粘贴内联代码而不是发布链接。
感谢有道理我没想到

标签： reactjs use-effect

【解决方案1】：

现在您忘记了在 App.js 文件中的导入

import React from 'react';

而且看起来您获取的数据甚至没有提供图片链接。如果您只想要名称，则可以使用 data[0].name 或类似名称，因为获取的数据会解析为对象数组。

【讨论】：

谢谢，但这并没有解决我的问题 :( 我已将代码粘贴到原始帖子中，因为我被告知不要共享链接。
@Norby 好的，现在您在 then 回调中使用 data.name，但看起来您只想在这里使用 data..
谢谢，这解决了我的问题！我还是新手。

【解决方案2】：

错误是你在 catch 语句后缺少一个右括号。

.catch(error => console.error("Error fetching data: ",error));

【讨论】：