Question

我是反应型初学者。我从服务器获取以下数据：

[{"id":"1","tmb":"23\/5\/96","name":"ehsan","family":"kharaman"}]

我的目标是在render方法中显示这些数据。

我的代码是：

import React, {Component} from 'react';
import {View, Text} from 'react-native';

class App extends Component {
  state = {
    data: '',
  };
  componentDidMount = () => {
    fetch('http://192.168.1.34/karbar/select.php', {
      method: 'GET',
    })
      .then(response => response.json())
      .then(responseJson => {
        console.log(responseJson);
        this.setState({
          data: responseJson,
        });
      })
      .catch(error => {
        console.error(error);
      });
  };
  render() {
    return (
      <View>
        <Text>{this.state.data.name}</Text>
      </View>
    );
  }
}
export default App;

Answer 1

我的朋友，

请注意，您的数据是一个数组，而不是一个对象，

要查看名称，您应该输入类似的文字

<Text>{this.state.data[0].name}</Text>

有权访问结果数组上的第一个元素。

请。还要注意，如果答案是数组，则状态中数据的默认值必须为空数组，而不是简单的字符串。

此链接可以帮助您根据情况正确显示答案

https://reactjs.org/docs/lists-and-keys.html

还应该检查条件渲染 https://reactjs.org/docs/conditional-rendering.html

Answer 2

直到您进行fetch调用以获取数据并且获取数据，状态data将为空字符串，因为在构造函数中已对其进行了初始化。好的做法是将其初始化为空数组，因为数据将是fetch

之后的数组

state = {
    data: [],
};

然后在渲染中，从数据中选择名称之前检查数据是否存在。而且数据是一个数组，因此您必须在选择名称（data[0].name）之前先获取第一个元素

render() {
    if (this.state.data.length > 0) {
        return (
            <View>
              <Text>{this.state.data[0].name}</Text>
            </View>
          );
    }
}

在本机中获取数据的问题

2 个答案: