Reactjs React Native：呈现API内容的基本平面列表

我正在尝试使用平面列表呈现API中的数据

我哪儿也去不了。我在填写DATA和renderItem字段时遇到很多问题

你能帮我吗

谢谢：）

从“React”导入React；
从“react native”导入{Text，ActivityIndicator，FlatList，View}；
从“axios”导入axios；
导出默认类结果扩展React.Component{
建造师（道具）{
超级（道具）；
//console.log（'state'，this.props）
此.state={
城市：“蒙彼利埃”//this.props.city，
报告：null，//Données de l'API
};
这个。fetchWeather（）；
}
天气预报{
axios
.得到(
"https://api.openweathermap.org/data/2.5/weather?q=" +
这个州，这个城市+
“&appid=9fce19ee0d267aa48afdf331bb1668da”，
)
。然后（（响应）=>{
this.setState（{report:response.data}）；
//console.log（response.data）
});
}
render（）{
const DATA=this.state.report；
if（this.state.report==null）{
返回；
}否则{
返回(
item.id}/>
);
}
}
}

renderItem

prop基本上将数据中的每个项目传递给提供的函数，以便您可以在列表中相应地呈现它们。像这样更改平面列表应该可以

render() {
    const {report} = this.state;

    if (report === null) {
      return <ActivityIndicator size="large" color="red" />;
    } else {
      return (
        <FlatList 
          data={report} 
          renderItem={(reportItem) => <Text> {reportItem.id} </Text>} 
          keyExtractor={(item) => item.id} />
      );
    }
  }

render（）{
const{report}=this.state；
如果（报告===null）{
返回；
}否则{
返回(
{reportItem.id}
keyExtractor={（项）=>item.id}/>
);
}
}

因此，我们的想法是平面列表将接受一个数组（

平面列表中有两个错误

renderItem必须是返回所有JSX代码的函数
由于您已经向平面列表提供了数据，因此不需要再次引用this.state.report.id，只需将其替换为{item.id}
因此，您的平面列表应该如下所示：


item.id}
renderItem={（项目）=>{
返回(
{item.id}）
}}
renderItem
应该是一个函数。它将包含数据数组中存在的每个项。请参阅。您将能够使用
{item.id}
谢谢@KennyJohnJacob！我正试图通过将renderItem作为函数来解决它，但它不起作用。我是初学者，我看到了平面列表文档。您能帮助我吗：）非常感谢你的帮助，肯尼。我尝试了你的解决方案，但我的设备中有一个错误：“不变冲突：尝试获取超出范围索引NaN的帧”你知道如何解决它吗？谢谢：）你能检查一下
data
中的数据是否是数组吗？不，我不认为数据是数组。数据指的是那里的信息：哦，那么你就不需要使用类似于
平面列表的东西了。你可以使用一个普通的标记，然后使用其中的数据：）是的，我终于找到了我的数据，它位于一个名为“weather”的数组中。我应该使用平面列表吗？
render() {
    const {report} = this.state;

    if (report === null) {
      return <ActivityIndicator size="large" color="red" />;
    } else {
      return (
        <FlatList 
          data={report} 
          renderItem={(reportItem) => <Text> {reportItem.id} </Text>} 
          keyExtractor={(item) => item.id} />
      );
    }
  }

import React from "react";
import { Text, ActivityIndicator, FlatList, View } from "react-native";
import axios from "axios";

export default class Results extends React.Component {
.
.
.

  render() {
    const DATA = this.state.report;

    if (this.state.report === null) {
      return <ActivityIndicator size="large" color="red" />;
    } else {
      return (
        <FlatList data={DATA} renderItem={function (item) {
          return <Text> {item.id} </Text>
        }} keyExtractor={(item) => item.id} />
      );
    }
  }
}

const Item = ({ title }) => (
  <View style={styles.item}>
    <Text style={styles.title}>{title}</Text>
  </View>
);

{
  title: "some title"
}