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

Posted 2023-03-16

【中文标题】如何从 React 中的高阶组件获取异步数据

【英文标题】：How to fetch async data from Higher Order Components in React

【发布时间】：2020-06-05 12:04:49

【问题描述】：

我如何进行 API 调用（可能是异步的）来获取数据以便能够进一步使用它。该类本身不会呈现任何内容。

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

非常感谢任何建议。代码 sn-ps 会更有帮助。提前致谢。

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,

【问题讨论】：

这能回答你的问题吗？ reactjs.org/docs/hooks-effect.html

我确实看过 useEffect()。我不确定如何在我的项目中使用它，因为我嵌入了另一个类并且没有渲染（）。任何建议都会有所帮助。谢谢！

【参考方案1】：

使用 useEffect 我的反应钩子，您可以进行 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>
    )

;

【讨论】：

感谢您的建议。我试过了，但是第一行 const AppForm = ( x, y, z, id, ...props ) => 的语法有一些问题。错误显示为 TypeError: Object(...) is not a function 。我很难弄清楚这样一个类的语法。

您使用的是 React v16.8 或更高版本，对吧？如果没有，我们需要使用类模式来实现上述逻辑。

非常感谢。我有 v16.2 并升级它就可以了。再次感谢！