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

【问题标题】：when i fetch data i can see that state is set but when i call data from state it's showing object undefined当我获取数据时，我可以看到状态已设置，但是当我从状态调用数据时，它显示对象未定义
【发布时间】：2020-12-03 19:22:34
【问题描述】：

这是我使用 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>
    );
  }
}

这就是我下雪的原因 error

【问题讨论】：

Render 方法在构造函数之后立即调用，您的 getUsers 方法是异步的，此时用户在 render 方法中访问时为 null。在构造函数中将用户初始化为空对象，或者在渲染中使用检查。

标签： react-native expo setstate

【解决方案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;
  }

【讨论】：

【解决方案2】：

后来我想我不确定这是否是正确的原因。

我尝试分别定义每个状态，而不是将整个 json 对象分配给状态并且它起作用了。

export default class details extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      userData: null,
      uid: null,
      name: null,
      phone: null,
      email: null,
      website: null,
      username: 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({
          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,
        });
      }
    }
  };

感谢大家分享你的知识。

【讨论】：