извлечение данных с помощью ax ios и рендеринг flatList

Question

Я пробовал Axe ios с реакцией на родную, но у меня проблемы. FlatList не отображает данные и выдает мне предупреждение: «У каждого ребенка в списке должна быть уникальная« ключевая »опора».

Я искал онлайн несколько часов и могу не могу найти решение. Самое близкое, что я мог найти, это настроить keyExtractor, что я и сделал.

Вот мой код:

import React, { useEffect, useState } from 'react';
import { ActivityIndicator, FlatList, Text, View } from 'react-native';
import Axios from 'axios';

export default App = () => {
  const [isLoading, setLoading] = useState(true);
  const [data, setData] = useState([]);

  useEffect(() => {
    Axios.get('https://reactnative.dev/movies.json')
      .then(({data}) => setData({data}))
      .catch((error) => console.error(error))
      .finally(() => setLoading(false));
  });

  return (
    <View style={{ flex: 1, padding: 24 }}>
      {isLoading ? <ActivityIndicator/> : (
        <FlatList
          data={JSON.stringify(data)}
          keyExtractor={({ id }, index) => id}
          renderItem={({ item }) => (
            <Text>{item.title}, {item.releaseYear}</Text>
          )}
        />
      )}
    </View>
  );
};

Я понимаю, что это, вероятно, очень простая проблема, но я бы очень благодарен, если вы мне помогли.

Думаю, стоит упомянуть, что он работает с fetch. Так что я думаю, что проблема в запросе ax ios .get, а не в flatList.

- вот API, если он используется:

{
  "title": "The Basics - Networking",
  "description": "Your app fetched this from a remote endpoint!",
  "movies": [
    { "id": "1", "title": "Star Wars", "releaseYear": "1977" },
    { "id": "2", "title": "Back to the Future", "releaseYear": "1985" },
    { "id": "3", "title": "The Matrix", "releaseYear": "1999" },
    { "id": "4", "title": "Inception", "releaseYear": "2010" },
    { "id": "5", "title": "Interstellar", "releaseYear": "2014" }
  ]
}

edit: после попытки здесь ответы перестали выдавать предупреждение, но выводит пустой список.

Answer 1

Попробуйте это

        FlatList
          data={JSON.stringify(data)}
          keyExtractor={(id, index) => index.toString()}
          renderItem={({ item }) => (
            <Text>{item.title}, {item.releaseYear}</Text>
          )}
        />

Answer 2

Я думаю, вам нужны данные журнала для отладки. Первое: setData({data}) неверно. Второе: не используйте JSON.stringify(data). Третье: keyExtractor={({ id }, index) => id} неверно

Попробуйте этот код ниже

import React, { useEffect, useState } from 'react';
import { ActivityIndicator, FlatList, Text, View } from 'react-native';
import Axios from 'axios';

export default App = () => {
  const [isLoading, setLoading] = useState(true);
  const [data, setData] = useState([]);

  useEffect(() => {
    Axios.get('https://reactnative.dev/movies.json')
      .then(({ data }) => {
        console.log("defaultApp -> data", data.movies)
        setData(data.movies)
      })
      .catch((error) => console.error(error))
      .finally(() => setLoading(false));
  }, []);

  return (
    <View style={{ flex: 1, padding: 24 }}>
      {isLoading ? <ActivityIndicator /> : (
        <FlatList
          data={data}
          keyExtractor={(item, index) => {
            // console.log("index", index)
            return index.toString();
          }}
          renderItem={({ item }) => {
            console.log("item", item)
            return (
              <Text style={{ flex: 1, backgroundColor: 'red' }}>{item.title}, {item.releaseYear}</Text>
            )
          }}
        />
      )}
    </View>
  );
};

Answer 3

В элементах рендеринга вам необходимо предоставить ключ к тексту:

      renderItem={({ item }) => (
        <Text key={item.title}>{item.title}, {item.releaseYear}</Text>
      )}

Было бы так, если предположить, что item.title уникален.

Чтобы предоставить больше контекста почему проблема заключается в том, что реагирование использует ключи для определения того, какие элементы в списке одинаковы для разных рендеров, поэтому он может выполнять меньше работы, чем создание целых новых элементов для каждого рендера. По сути, React использует ключи, чтобы определить, какие элементы являются одним и тем же элементом. Таким образом, если вы меняете ключ между каждым рендерингом, реагирующий будет считать, что элемент новый, и размонтировать старый перед монтированием нового.

Можно использовать индекс в качестве ключа, но это менее производительно, чем используя уникальный идентификатор. Поскольку использование индекса означает, что если вы сортируете или иным образом переупорядочиваете список, ему придется выполнить гораздо больше работы, чтобы согласовать различия, чем просто перемещать узлы dom вокруг.

Редактировать: я исправил другие проблемы, которые у вас были, кроме первоначального вопроса.

В вызове useEffect требовалось использовать массив зависимостей, чтобы он не вызывался при каждом повторном рендеринге.

Данные из вызов ax ios, необходимый для использования data.movies для получения массива фильмов.

Данные, передаваемые в FlatList, не должны быть подвергнуты строковому форматированию, поскольку это приводит к тому, что каждый строковый символ отображается как новый строка (запятые).

https://snack.expo.io/rVzXb! gsJ