Question

我在ComponentDidMount（）上返回了获取信息。试图获取响应以呈现在页面上。

我将状态设置如下：

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}
      />

我必须先映射数据然后尝试呈现它吗？

console.log（this.state.marks）的输出：

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

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

Answer 1

marks是一个数组，但是您没有共享数组中每个对象的外观。如果它是一个字符串数组，那很好，但是如果它是一个对象，则需要对其进行解构，然后拉出要呈现的字符串。

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

Answer 2

因为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

从获取获取React-Native渲染json

2 个答案: