React native Flatlist rendering from custom API ，代码怎么写？

Question

我正在尝试渲染 API 中的值，如果我控制这些值，我可以看到数组，但无法从 Flatlist 中看到它。

API 提取线在这里

我认为这是我犯错误的地方

控制台输出数组

请帮帮我，

Answer 1

好吧，你在这里做错了两件事。让我们从第一个加载部分开始。

注意：我将使用您现有的 FLATLIST PROPS 作为 ...otherProps。

您是有条件地渲染整个 Flatlist 组件，您可以使用 flatlist 的 ListEmptyComponent 来渲染加载或空列表视图。

<Flatlist
  ...otherProps
  ListEmptyComponent={() => {
    if(isLoading){
      return <ActivityIndicator/>
    }
  }
/>

Flatlist 是一个纯组件，这意味着它需要一种方法来知道它是否应该 re-render，幸运的是我们有一个 extraData prop 正是为了这个目的。取自前面的例子。

<Flatlist
  ...otherProps
  extraData={data}
  ListEmptyComponent={() => {
    if(isLoading){
      return <ActivityIndicator/>
    }
  }
/>

PS：您真的应该在此处查看文档以获取更多信息 https://reactnative.dev/docs/flatlist#listemptycomponent

Answer 2

后台返回的数据是对象数组。重构 renderItem 道具如下。

<Flatlist
  keyExtractor={(item) => item.id}
  data={data}
  renderItem={({ item }) => (
    <>
      <Text>{item.date}</Text>
      <Text>{item.date_gmt}</Text>
    </>
  )}
/>

React native Flatlist rendering from custom API ，代码怎么写？

React native Flatlist rendering from custom API , how to write the code?

react-native

fetch-api

flatlist