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

您可以提供＆＃39; if＆＃39;声明，并且最好将你的内容移到渲染之外，这样它就不会在每个渲染上重新定义它：

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>
    );
}
}

使用来自web-service / API的数据填充视图

1 个答案: