React API Fetch 解决承诺答案

【问题标题】：React API Fetch resolve promiseReact API Fetch 解决承诺
【发布时间】：2021-06-13 15:38:01
【问题描述】：

我有一个功能组件 Users.js 和一个单独的 Api.js。在给我错误的代码下方：

// Function Users.js
useEffect(() => {
        console.log(fetchUsers());
        const data = fetchUsers();
        setUsers(data);
        //setUsers(fetchUsers());
}, []);

// Api.js
export const fetchUsers = async () => {
    const data = await fetch('https://jsonplaceholder.typicode.com/users');
    return await data.json();
};

我收到以下错误：

TypeError: users.map is not a function

这是因为我返回了一个 Promise，我可以通过评估 console.log(fetchUsers()) 看到它。我该如何解决这个问题，因为只要我在我的函数中使用函数 fetchUsers 而不是在单独的文件中，它就可以工作......

【问题讨论】：

在返回的 Promise 上调用 .then() 以获取它解析为的 data，然后设置状态：fetchUsers().then(data => setUsers(data))（或者，在你的 useEffect() 中创建一个异步函数，它等待的承诺）。你也可以直接返回data.json()，不需要等待，因为await返回的值会在你返回后再次包装回一个Promise

标签： javascript reactjs api promise

【解决方案1】：

我试图更新你的代码给你两个例子：

export default function App() {
  const [users, setUsers] = useState();

  useEffect(() => {
    async function getData() {
      const data = await fetchUsers();
      setUsers(data);
    }

    getData()
    
  }, []);

  return (
    <div className="App">
      <h1>Hello CodeSandbox </h1>
      {
        (users || []).map(item => <span>{item.name}</span>)
      }
    </div>
  );
}

export const fetchUsers = async () => {
  const data = await fetch('https://jsonplaceholder.typicode.com/users');
  return await data.json();
};

第二个比第一个好，我在你的函数上使用了 .then()：

export default function App() {
  const [users, setUsers] = useState();

  useEffect(() => {

    fetchUsers().then(items => setUsers(items))
    
  }, []);

  return (
    <div className="App">
      <h1>Hello CodeSandbox </h1>
      {
        (users || []).map(item => <span>{item.name}</span>)
      }
    </div>
  );
}

在这两种情况下，我都可以检索用户。我在单个文件中进行了尝试，但您当然可以将功能移动到您喜欢的位置。

我建议你在渲染数据之前检查用户数组是否存在（users || []）或者给它一个默认的空数组值[users, setUsers] = useState([])

【讨论】：

【解决方案2】：

你可以处理返回的promise，然后设置状态。

fetchUsers().then((result) => setUsers(result));

【讨论】：