Question

我的问题如下：

我有一个异步函数，它发出一个 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>
  ...
);

问题是，当我编译时，它出现“对象作为 react child 无效（找到：object Promise）。如果你想渲染一个孩子的集合，请改用数组。

我该怎么办？

Answer 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}
    />
  );
};

Answer 2

我昨天遇到了同样的问题。你不应该在渲染函数中做异步的事情。你应该依靠状态或道具。

如何在 reactJS 中渲染异步函数？

2 个答案: