如何在 reactJS 中渲染一个异步函数？答案

【问题标题】：How to render an asynchronous function in reactJS?如何在 reactJS 中渲染一个异步函数？
【发布时间】：2021-05-26 18:20:59
【问题描述】：

我的问题如下：

我有一个异步函数，它发出一个 mysql 请求，并根据请求的结果返回不同的 DIV。

const GetData = async (idAluno, disciplina) => {
  variavel = await confereInicial(idAluno, disciplina.id);
  //console.log(variavel); imprime direitinho, sem problemas

  if (variavel.data.length === 0) {
    return (
      <DivCheckBox
        dads={dados}
        nomeDisciplina={disciplina.title}
        labelDisciplina={disciplina.label}
        id={disciplina.id}
        inicial={0}
      />
    );
  } else {
    return (
      <DivCheckBox
        dads={dados}
        nomeDisciplina={disciplina.title}
        labelDisciplina={disciplina.label}
        id={disciplina.id}
        inicial={1}
      />
    );
  }
};

并且这个函数在屏幕的渲染部分被多次调用（通过地图）。因此：

return (
  <div>
    {dados.state.nodesPadrao.map((p) => {
      return <GetData idAluno={1} disciplina={p} />;
    })}
  </div>
  ...
);

问题是，当我编译时，它显示“对象作为反应子无效（找到：object Promise）。如果要呈现子集合，请改用数组。

我该怎么办？

【问题讨论】：

您可以将承诺放入组件生命周期方法（例如 componentDidMount() ）并使用 setState 方法更新组件状态。渲染方法必须是同步的，并且只依赖于 props 和 state。
问：如何在reactJS中渲染一个异步函数？ - 答：杠杆承诺！重复问题（详细说明如何执行此操作）：Objects are not valid as a React child (found: [object Promise])

标签： javascript node.js reactjs axios

【解决方案1】：

您需要了解函数 (GetData()) 和函数组件 (<GetData .../>) 之间的区别。

函数组件不能是async，因为它们隐含地总是返回一个Promise，并且你不能从一个组件返回一个Promise，因为你不能渲染一个Promise。

您需要使用 useEffect 钩子在组件挂载时加载数据，然后在加载后渲染：

const GetData = ({idAluno, disciplina}) => {
  const [variavel, setVariavel] = React.useState(null);
  React.useEffect(() => {
    confereInicial(idAluno, disciplina.id).then(setVariavel);
  }, [idAluno, disciplina.id]);
  if (variavel === null) {
    // Still loading? You could also return `null` to not render anything.
    return <>Loading</>;
  }
  return (
    <DivCheckBox
      dads={dados}
      nomeDisciplina={disciplina.title}
      labelDisciplina={disciplina.label}
      id={disciplina.id}
      inicial={variavel.data.length === 0 ? 0 : 1}
    />
  );
};

【讨论】：

【解决方案2】：

我昨天也遇到了同样的问题。您不应该在渲染函数中执行异步操作。您应该转发状态或道具。

【讨论】：