使用 useEffect 获取数据时，API 工具函数无法正确更新状态的解决方案

第一段引用上面的摘要：

本文针对 React 初学者在使用 useEffect 钩子获取数据并使用工具函数进行 API 调用时，遇到的数据无法正确更新状态的问题，提供了详细的分析和解决方案。通过修改 API 工具函数，确保 fetch 调用返回 Promise，从而保证数据能够正确传递并更新组件状态。

在使用 React 的 useEffect 钩子从 API 获取数据时，经常会遇到数据没有正确更新组件状态的问题，尤其是在将 API 调用封装到单独的工具函数中时。 这通常是由于 Promise 没有正确返回导致的。下面将详细介绍这个问题的原因以及如何解决。

问题分析

当使用 useEffect 发起异步请求时，通常会调用一个 API 工具函数来处理实际的请求。如果该工具函数没有正确地返回 Promise，useEffect 中的 .then() 方法可能不会等待异步操作完成，导致状态更新失败。

以下面的代码为例：

// Things.jsx
import React, { useState, useEffect } from 'react';
import ThingsAPI from './ThingsAPI';

export default function Things() {
  const [things, setThings] = useState([]);

  useEffect(() => {
    ThingsAPI.getAll().then((things) => {
      setThings(things);
      console.log("setThings(things) = " + things);
    });
  }, []);

  return (
    <div>
      {things && <p>Data loaded</p>}
    </div>
  );
}

// ThingsAPI.js
const URL_STRING = "http://localhost:8888/things";

export const ThingsAPI = {
  getAll: async function() {
    fetch(URL_STRING)
      .then((response) => {
        console.log("return response.json()");
        return response.json();
      })
      .then( data => {
        console.log("return data");
        return data
      })
  },
};

在这段代码中，ThingsAPI.getAll() 函数使用了 fetch API 来获取数据，并在 .then() 方法中处理响应。然而，getAll 函数本身并没有 return fetch 返回的 Promise。 这意味着 useEffect 中的 .then() 方法不会等待 fetch 操作完成，导致 setThings 接收到的值是 undefined。

解决方案

英特尔AI工具

英特尔AI与机器学习解决方案

70

查看详情

要解决这个问题，需要确保 API 工具函数返回 fetch API 返回的 Promise。 这样，useEffect 中的 .then() 方法才能正确地等待异步操作完成，并将返回的数据传递给 setThings。

修改后的 ThingsAPI.js 代码如下：

// ThingsAPI.js
const URL_STRING = "http://localhost:8888/things";

export const ThingsAPI = {
  getAll: function () {
    return fetch(URL_STRING) // 关键：返回 fetch 的 Promise
      .then(response => {
        console.log('return response.json()');
        return response.json();
      })
      .then(data => {
        console.log('return data');
        return data;
      });
  },
};

通过在 getAll 函数中添加 return fetch(URL_STRING)，可以确保 ThingsAPI.getAll() 返回一个 Promise。现在，useEffect 中的 .then() 方法会等待 fetch 操作完成，并将返回的数据正确地传递给 setThings，从而更新组件状态。

注意事项

• 确保 API 工具函数返回 Promise，尤其是在使用 fetch 或其他异步操作时。
• 使用 async/await 语法可以简化异步代码的编写，但仍然需要确保函数返回 Promise。
• 仔细检查控制台输出，以确定异步操作是否按预期完成。

总结

在使用 React 的 useEffect 钩子和 API 工具函数时，确保 API 工具函数返回 Promise 至关重要。 只有这样，才能保证异步操作按预期完成，并且数据能够正确地传递和更新组件状态。通过理解 Promise 的工作原理并遵循最佳实践，可以避免此类问题，并编写出更加健壮和可维护的 React 代码。

以上就是使用 useEffect 获取数据时，API 工具函数无法正确更新状态的解决方案的详细内容，更多请关注php中文网其它相关文章！