使用来自 Web 服务/API 的数据填充视图

Question

我正在尝试在 React Native 中使用 API 的数据来创建多个视图。

我使用了下面的代码，但页面在 Web 服务响应之前呈现，所以我保留了这个错误：

未处理的 JS 异常：null 不是对象（评估 'this.state.user.map'）

export default class Component6 extends Component {
constructor(props) {
    super(props);
    this.state = {
        user: null
    }
}
componentDidMount() {
    this.fetchUsers();
}
fetchUsers() {
    fetch('https://jsonplaceholder.typicode.com/users')
        .then((response) => response.json())
        .then((response) => {
            this.setState({
            });
        });
}

render() {
    contents = this.state.user.map(function (item) {
        return (
            <View key={item.id} style={styles.content}>
                <Text>{item.email}</Text>
            </View>
        );
    });
    return (
          {contents}
    );
}
}
AppRegistry.registerComponent('Component6', () => Component6);

Answer 1

你可以提供一个"if"语句，最好将你的内容移到渲染之外，这样它就不会在每次渲染时重新定义它：

export default class Component6 extends Component {
constructor(props) {
    super(props);
    this.state = {
        user: null
    }
}
componentDidMount() {
    this.fetchUsers();
}
fetchUsers() {
    fetch('https://jsonplaceholder.typicode.com/users')
        .then((response) => response.json())
        .then((response) => {
            item = this.viewconstur(response),
            this.setState({
              user: item
            });
        });
}
  renderContents = () => {
    if (this.state.user) {
      this.state.user.map((item) => (
        <View key={item.id} style={styles.content}>
          <Text>{item.email}</Text>
        </View>
      ));
    }
  }
render() {
    return (
          <View>
            {this.renderContents()}
          </View>
    );
}
}