react-native - 当我获取数据时，我可以看到状态已设置，但是当我从状态调用数据时，它显示对象未定义

Question

这是我使用 this.state.user.anything 时的代码，它只是向我显示它是空的。任何帮助将不胜感激。感谢您的时间。

我没有得到任何线索来解决它。

export default class details extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      userData: null,
      user: null,
    };
    this.getUsers();
  }
  getUsers = async () => {
    let urlUsers = "https://jsonplaceholder.typicode.com/users";
    let req = await fetch(urlUsers);
    let res = await req.json();
    this.setState({
      userData: res,
    });
    for (let i = 0; i < res.length; i++) {
      if (this.state.userData[i].id == this.props.route.params.id) {
        await this.setState({
          user: {
            name: this.state.userData[i].name,
            uid: this.state.userData[i].id,
            phone: this.state.userData[i].phone,
            email: this.state.userData[i].email,
            website: this.state.userData[i].website,
            username: this.state.userData[i].username,
          },
        });
      }
    }
    console.log(this.state.user);
  };

  render() {
    return (
      <View>
        <Text>User Id : {this.state.user.uid}</Text>
        <Text>Name : {this.state.user.name}</Text>
        <Text>email : {this.state.user.email}</Text>
        <Text>phone : {this.state.user.phone}</Text>
        <Text>Website : {this.state.user.website}</Text>
        <Text>username : {this.state.user.username}</Text>
      </View>
    );
  }
}

这就是我下雪的方式错误

标签： react-nativeexposetstate

Answer 1

这背后的原因是获取用户数据并再次重置状态需要时间，并且该render方法会立即调用，因此它会崩溃。这可能会有所帮助

render() {
    return this.state.user ? (
      <View>
        <Text>User Id : {this.state.user.uid}</Text>
        <Text>Name : {this.state.user.name}</Text>
        <Text>email : {this.state.user.email}</Text>
        <Text>phone : {this.state.user.phone}</Text>
        <Text>Website : {this.state.user.website}</Text>
        <Text>username : {this.state.user.username}</Text>
      </View>
    ) : null;
  }