当从 API 获取的数据发生变化时，如何确保 React 组件重新渲染？

Question

我的应用程序中有一个 React 组件，它在其 componentDidMount 生命周期方法中从 API 获取数据。但是，我还需要确保每当获取的数据发生变化时组件都会重新呈现。实现这一目标的最佳方法是什么？您能否提供一些代码示例来说明解决方案？

我考虑过使用各种技术，例如在组件的 componentDidMount 方法中设置状态，使用 useState 和 useEffect 等挂钩，或者使用 Redux 等库来管理组件的状态。但是，我不确定在这种情况下哪种方法最有效且可维护。

Answer 1

您可以尝试这样的方法，使用钩子，在创建组件时获取 API，然后在再次调用 API 时设置新状态。

export default function MyComponent(props: any): ReactElement {
  const {dataFromApi, setDataFromApi} = useState();

  useEffect(() => {
    // Executed once on component initialization
    getData();
  },[])

  function getData() {
     fetch(url)
        .then((response) => response.json())
        .then((json) => {
            setDataFromApi(json);
        });
  }


  return (
   <div><button onclick={getData}></button></div>
  )
}

Answer 2

首先，建议使用React函数式组件而不是类组件

其次，查看 React Docs 中的这个链接，它说明了如何在内部进行数据获取

useEffect

第三，如果你要使用Redux，我的建议是使用Redux Toolkit和RTK Query。

RTK Query 为您提供获取数据的钩子