在 React Native 中渲染来自 JSON 的数据答案

【问题标题】：Render data from JSON in react native在 React Native 中渲染来自 JSON 的数据
【发布时间】：2021-03-20 17:21:48
【问题描述】：

我试图渲染这些 JSON 数据，但我根本无法访问公司。我不知道问题出在哪里？这是 JSON：

[
{
   "address": {
       "country": "Albania",
       "city": "Tirana",
       "street": "Sheshi Skenderbe"
   },
   "_id": "5fc96784e740aaa9af2139ae",
   "company": "Big market",
   "phone": "+35568123456"
}
]

这是我的代码：

const [data, setData] = useState([]);
  useEffect(() => {
    (async () => {
      try {
        const response = await axiosApiInstance.get(`/companies/list/1`);
        setData(response.data);
        console.log(response.data, "Data from Furnitoret");
      } catch (err) {
        Alert.alert("Mesazhi", err.response.data.message);
      }
    })();
  }, []);

和渲染

 <FlatList
        keyExtractor={(item, i) => i.toString()}
        data={data}
        renderItem={({ item, i }) => (
          <Card
            title={data.company}
            onPress={() => navigation.navigate("Porosia")}
          />
        )}
      />

【问题讨论】：

不应该是title={item.company}吗？

标签： javascript json reactjs react-native arraylist

【解决方案1】：

把data.company改成item.company点赞

<Card
    title={item.company}
/>

【讨论】：

【解决方案2】：

在平面列表的 renderItem 属性中，您将名称 item 赋予 data 数组中的每个元素，但随后您尝试使用完整列表的数据对象，而不是当前的 @987654324 @。

应该是

      <FlatList
        keyExtractor={(item, i) => item._id}
        data={data}
        renderItem={({ item, i }) => (
          <Card
            title={item.company} // <----------------- item not data
            onPress={() => navigation.navigate("Porosia")}
          />
        )}
      />

另外，作为旁注，您可能希望使用公司 ID 作为键而不是数组索引，因为稍后更新此列表时可能会遇到性能问题

keyExtractor={(item, i) => item._id}

【讨论】：

谢谢，现在可以了
@Emily 当有人在 StackOverflow 上解决您的问题时，您应该将他们的答案标记为正确答案。这是表达感谢的方式，并为他们提供声誉积分，值得他们花时间回答。
我知道，但我没有这样做的声誉
@Emily 你当然可以。您不需要声誉来接受答案。检查答案旁边有一个灰色的复选标记。单击它以接受答案。 stackoverflow.com/help/someone-answers