React-Native render json from fetch

Question

我在ComponentDidMount((上返回了一个fetch。正在尝试获取要在页面上呈现的响应。

我已将状态设置如下：

this.state = {
loading: true,
file: null,
video: null,
marks: []
};

和我的提取：

componentDidMount() {
return fetch('http://10.0.2.2:8080/marks/createMark')
.then(response => response.json())
.then((data) => {
this.setState({
loading: false,
marks: data.mark
}, () => {
console.log(data.mark);
console.log(this.state.marks);
// const dataMap = data.mark.map((item) => {
//   return {
//     key: item.id,
//     label: item.mark
//   };
// });
});
})
.catch(err => console.log(err));

}

现在我在返回内部的渲染：

const { marks } = this.state;
<FlatList
data={marks}
renderItem={({ item }) => <Text>{item.mark}</Text>}
keyExtractor={(item, index) => index}
/>

我必须映射数据然后尝试渲染它吗？？

控制台日志输出(this.state.marks(：

{ _id: '5b61e47a55a0000aa980fab1', mark: 'ItHe', __v: 0 }

标记是一个伪随机字符串，可以包含在后端上创建的字母和数字

Answer 1

因为this.state.marks是一个对象。首先，您需要将其转换为此形式[｛｝]。您可以进行以下更改以使其工作。

fetch('http://10.0.2.2:8080/marks/createMark')
.then(response => response.json())
.then((data) => {
let marks = [data.mark];  //Add this line
this.setState({
loading: false,
marks: marks    // Change this line
}, () => {  
....
Rest of your code

Answer 2

marks是一个数组，但您并不共享数组中每个对象的外观。如果它是一个字符串数组，那就很好了，但如果它是对象，则需要对其进行破坏，并拉出要渲染的字符串。

<Text>{item.mark.someKeyWhoseValueIsAString}</Text