React 组件异步传递数据给子组件的指南

2023-11-18 05:23:55

在 React 应用程序中，父组件经常需要将数据传递给子组件。在某些情况下，这些数据可能是异步获取的，例如通过 API 调用。本文将深入探讨 React 中的异步数据传递，提供循序渐进的指南，并解释在父组件和子组件之间实现高效通信所需的最佳实践。

监听状态更新

React 中最常见的异步数据传递方法之一是使用状态更新。父组件可以异步获取数据，然后通过更新其状态来触发子组件的重新渲染。子组件可以使用 useEffect 钩子监听状态更改，并在状态更新后更新其道具。

// 父组件
const ParentComponent = () => {
  const [data, setData] = useState(null);

  useEffect(() => {
    // 从 API 获取异步数据
    fetchData().then((data) => setData(data));
  }, []);

  return <ChildComponent data={data} />;
};

// 子组件
const ChildComponent = ({ data }) => {
  useEffect(() => {
    // 当父组件更新数据时重新渲染
    console.log('数据已更新:', data);
  }, [data]);

  return <div>{data}</div>;
};

回调和承诺

回调和承诺是处理异步操作的另一种有效方法。父组件可以定义一个回调函数，并在异步数据可用时调用它。子组件可以使用道具传递此回调函数，并在收到数据后调用它。

// 父组件
const ParentComponent = () => {
  const [data, setData] = useState(null);

  const getData = () => {
    // 从 API 获取异步数据
    fetchData().then((data) => setData(data));
  };

  return <ChildComponent getData={getData} />;
};

// 子组件
const ChildComponent = ({ getData }) => {
  useEffect(() => {
    // 调用父组件定义的回调函数以获取数据
    getData();
  }, [getData]);

  return <button onClick={getData}>获取数据</button>;
};