Return JSON 数据基于 React FlatList 中的索引

Question

我正在尝试 return 来自这个只读示例的第一个 fruit/color 数据 JSON:

"start": 0,
"limit": 1,
"filteredSize": null,
"results": [
    {
        "id": 20587193,
        "fruit": "apple",
        "color": "red",
    },
    {
        "id": 20587191,
        "fruit": "banana",
        "color": "yellow",
    }
]

在 React Native 中使用 FlatList：

<FlatList
data={data.results}
keyExtractor={({ id }, index) => id.toString()}
renderItem={({ item }) => (
<exampleComponent
fruitData={item.fruit}
colourData={item.color} />
)}
/>

这是我的 API 电话：

fetch('http://localhost:8080/login', headers)
      .then((response) => response.json())
      .then((json) => setData(json))
      .catch((error) => console.error(error))
      .finally(() => setLoading(false));
  }, []);

但是，以上return都是水果和颜色：

apple, red
banana, yellow

我知道我需要访问 data.results 的第一个元素的索引，但我不确定将它放在我的代码中的什么位置。

如果我添加 data.results 的 console.log 作为链式 .then，如下所示：

fetch('http://localhost:8080/login', headers)
      .then((response) => response.json())
      .then((json) => setData(json))
      .catch((error) => console.error(error))
      .then(function(){
        console.log("dataResults: " + data.results)
      })
      .finally(() => setLoading(false));
  }, []);

出于某种原因它调用了 3 次，但第一次是未定义的，所以也许这就是我遇到麻烦的原因：

console.log output:

dataResults: undefined
dataResults: [object Object],[object Object]
dataResults: [object Object],[object Object]

我的许多尝试 return 出现 TypeError: Cannot read property '0' of undefined 错误，例如将 console.log 调用更改为：

console.log("dataResults: " + data.results[0])

更新

我现在知道 console.log 被多次调用是因为 useEffect 被重新渲染，而不是 useEffect 本身被多次调用。

但是还是不明白为什么不能访问data.results进行过滤，但是访问data.results可以整体使用？

如何在我的 FlatList 中使用之前编辑 data 数组？

Answer 1

无法在 renderItem 中使用 [0]。您可以简单地使用数组 slice() 方法来仅获取拳头元素。

示例：

<FlatList
   data={results.slice(0, 1)}
   keyExtractor={item => item.id}
   renderItem={({ item }) => (
     <exampleComponent
        fruitData={item.fruit}
        colourData={item.color} />
      )}
/>

Answer 2

事实证明，当访问 JSON 的嵌套部分时，数据作为对象而不是数组返回 ，但是 Flatlist 期望一个数组。

我在 S.O 上找到了这个答案。 () 意味着我只需要执行以下操作：

if(data.results != undefined){
      var fruitArray = Object.entries(data.results)
}

我仍然认为我没有正确使用状态，因此使用了 if(data.results != undefined) 控件，但它至少现在可以正常工作。

这意味着我现在可以使用 firstFruitName = fruitArray[0][1]

访问单个水果

Return JSON 数据基于 React FlatList 中的索引

Return JSON data based on index in React FlatList

json

react-native-flatlist

更新