如何在FlatList中以异步方法返回组件

首先,我注意到renderCard中存在语法错误。这是无效的JSX,因为结束标记与开始标记不匹配,应该将props传递到组件中,如 propName={propValue} 。

<Card
    index={code}
    {_renderSomething(id)}
</FlipCard>

我想也许你打算写这个

<Card index={code}>
    {_renderSomething(id)}
</Card>

将_renderSomething的结果作为卡组件的子道具进行传递。这解释了您作为异步函数得到的错误作为React子元素无效。

相反,您可以将_renderSomething重构到一个单独的React组件中,并在useEffect钩子中进行数据加载。

const Something = ({ id }) => {
  const [data, setData] = useState(null);

  useEffect(() => {
     database.get(...).then(setData);
  }, [id])
    
  return (
    <AnotherComponent data={data} />
  );
};

然后可以在_renderCard中使用,如下所示

const _renderCard = ({item}) => {
  const {code, id} = item;
  ...
  return (
    <Card index={code}>
      <Something id={id} />
    </Card>
  );
};