如何从 React 中的高阶组件获取异步数据

Question

如何进行 API 调用（可能是异步的）来获取数据以便进一步使用它。 class 本身不渲染任何东西。

我是功能组件的新手，正在尝试 - 在 AppForm 中获取数据并 - 将其作为参数发送给 fun2()。

非常感谢任何建议。代码片段会更有帮助。提前致谢。

const AppForm = ({ x, y, z, id, ...props }) => (

  <InnerForm
    input={x ? fun1(x) : fun2()}
    isEqual={(a, b) => (a && a.id) === (b && b.id)}
  >

    {val => (
      <MainForm
        x={x}
        y={y}
        z={z}
        initialValues={val}
        {...props}
      />
    )}
  </InnerForm>
);
AppForm.propTypes = {
x: PropTypes.object,
y: PropTypes.object,
z: PropTypes.object,
}

Answer 1

借助 useEffect 我的 React 挂钩，您可以进行 api 调用并使用 useState 挂钩将数据设置为状态。收到数据后，您可以通过传递所需的值来渲染组件

const AppForm = ({ x, y, z, id, ...props }) => {
    const [data, setData] = useState(null);

    useEffect(() => {
        axios.get('path').then((res) => setData(res));
    }, []);

    if(!data) return <Loading />
    return (
      <InnerForm
        input={x ? fun1(x) : fun2(data)}
        isEqual={(a, b) => (a && a.id) === (b && b.id)}
      >

        {val => (
          <MainForm
            x={x}
            y={y}
            z={z}
            initialValues={val}
            {...props}
          />
        )}
      </InnerForm>
    )

};

如何从 React 中的高阶组件获取异步数据

How to fetch async data from Higher Order Components in React

javascript

reactjs

higher-order-components

use-effect

react-functional-component