根据 React FlatList 中的索引返回 JSON 数据答案

【问题标题】：Return JSON data based on index in React FlatList根据 React FlatList 中的索引返回 JSON 数据
【发布时间】：2021-06-09 12:03:40
【问题描述】：

我试图从这个只读示例 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));
  }, []);

然而，上面返回的结果是水果和颜色：

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]

我的许多尝试都返回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 数组之前对其进行编辑？

【问题讨论】：

标签： json react-native-flatlist

【解决方案1】：

不能在 renderItem 中使用 [0]。您可以简单地使用数组 slice() 方法来仅获取第一个元素。

例子：

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

【讨论】：

我好像做不到，data={data.results.slice(0,1)} 返回TypeError: Cannot read property 'slice' of undefined
你可以使用这个数组。 var results = [ { "id": 20587193, "fruit": "apple", "color": "red", }, { "id": 20587191, "fruit": "banana", "color": "yellow ", } ]
对不起，我不明白；我无法编辑 json 数据，它只准备好了，我可以对其进行排序，但我想做的只是返回现有的 2 个（或 100 个）结果中的一个。这可能是第一个结果（索引 0），也可能是数组中的另一个位置。

【解决方案2】：

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

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

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

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

这意味着我现在可以使用 firstFruitName = fruitArray[0][1] 访问单个水果

【讨论】：