在本机反应中渲染来自 JSON 的数据

Question

im trying to render these JSON data but I cant access company at all.I cant figure out where is the problem? This is the JSON:

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

This is my code:

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);
      }
    })();
  }, []);

and the render

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

Answer 1

Within your renderItem prop of the flatlist, you giving the name item to each element in the data array, but then you are trying to use your data object which is the complete list, instead of the current item .

It should be

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

Also, as a side note you might want to use the company id as the key instead of the array index, as you might run into performance problems when updating this list later on

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

Answer 2

change data.company to item.company like

<Card
    title={item.company}
/>