React Native 中的 Invariant Violation 错误 FlatList

Question

我正在尝试在 react-native 中使用带有 api 调用的平面列表，但我收到错误消息“试图获取帧或索引 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();
      }, []);

我该怎么做才能解决这个问题？

Answer 1

useState 挂钩与 class-based 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);
}

React Native 中的 Invariant Violation 错误 FlatList

Invariant Violation error FlatList in react native

react-native

react-native-flatlist