reactjs 如何在FlatList内的异步方法中返回组件

gcuhipw9 于 2023-01-12 发布在 React

关注(0)|答案(1)|浏览(95)

我有一个功能组件

const Foo = () => {
  const _renderSomething = async id => {
    const data = await database.get(SOME_TABLE).Where(someColumnValue = id);        
    return Promise.resolve(
      <AnotherComponent
        data={data} />
    );
  };

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

  return (
    <FlatList
      data={rawData}
      initialNumToRender={rawData.length}
      keyExtractor={item => item.code}
      renderItem={_renderCard}
    />
  );

现在，这给了我
错误错误：对象作为React子级无效（找到：键为{_U，_V，_W，_X}的对象）。如果要呈现子对象的集合，请改用数组。
我不太明白。

reactjs

来源：https://stackoverflow.com/questions/75094875/how-to-return-a-component-in-an-async-method-withing-a-flatlist

1条答案

按热度按时间

kxxlusnw1#

首先，我注意到renderCard中有一个语法错误，这不是有效的JSX，因为结束标记与开始标记不匹配，并且props应该被传递到propName={propValue}这样的组件中。

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

我猜你是想写这个

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

在这里，您将_renderSomething的结果作为Card组件的子属性传递。这解释了您在异步函数作为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>
  );
};

赞(0）回复(0）举报 2023-01-12

我来回答

reactjs 如何在FlatList内的异步方法中返回组件

1条答案

相关问题

热门标签

最新问答