Ошибка неизменного нарушения FlatList в React Native - PullRequest
Новая
       41

Ошибка неизменного нарушения FlatList в React Native

0 голосов
/ 06 августа 2020

Я пытаюсь использовать плоский список с вызовом api в react-native, но получаю сообщение об ошибке «попытался получить индекс кадра или вне диапазона NaN». Ответ api - это массив.

Мой плоский список выглядит как показано ниже 

<FlatList
      data={dataSource}
      renderItem={({ item}) => {  
      return (   
         <Text style={{ fontSize: 16, color: "black" }}>
            {item.name}
         </Text>);
 }}
 />

Мой вызов api выглядит следующим образом 

const [dataSource, setDataSource] = useState([]);
    
    useEffect(() => {
        const getData =  () => {
          try {
            const response = await axios.get(
              "https://restcountries.eu/rest/v2/name/united"
            );
            console.log(Array.isArray(response.data)); //true
            
            setDataSource({ dataSource: response.data });
            
            setLoading(false);
          } catch (err) {
            console.log(err);
          } 
        };
    
        getData();
      }, []);

Что я могу сделать, чтобы исправить эту проблему ?

1 Ответ

1 голос
/ 06 августа 2020

Хук useState работает иначе, чем this.setState() на основе классов. Обратитесь к официальным документам для получения дополнительной информации https://reactjs.org/docs/hooks-state.html#updating -state

Правильный синтаксис в вашем случае будет 

try {
    const response = await fetchData();
    setDataSource(response.data); // Array
    setLoading(false);
} catch (err) {
    console.log(err);
}
...