Question

我正在调用axios请求以从API获取联系人，然后使用当前响应设置状态。

constructor(props) {
    super(props);
    this.state = {
      contacts: [],
      page: 1,
    };
  }

async getContacts() {
const {page} = this.state;
try {
  let response = await axios.get(`${API.URL}/contacts?page=${page}`);
  const result = response.data['hydra:member'];
  this.setState({contacts: JSON.stringify(result[1], null, '  ')});
} catch (error) {
  console.log(error.message);
}

}

async componentDidMount() {
await this.getContacts();
console.log('###############################');
console.log(this.state.contacts);
console.log('###############################');

}

控制台日志显示状态值：

###############################
[Wed May 27 2020 16:00:17.810]  LOG      {
  "civility": "female",
  "lastName": "Alexandre",
  "phone": "+1437390902042"
}
[Wed May 27 2020 16:00:17.812]  LOG      ###############################

但是当我破坏这种状态时：

async componentDidMount() {
const {contacts} = this.state;
await this.getContacts();
console.log('###############################');
console.log(contacts);
console.log('###############################');

}

Answer 1

您正在调用setState之前破坏状态，这就是为什么您得到一个空数组的原因。在销毁getContacts

之前，应先致电contacts

async componentDidMount() {
  await this.getContacts(); // getContacts should be called before
  const {contacts} = this.state;
  console.log('###############################');
  console.log(contacts);
  console.log('###############################');
}

编辑：我看到您不了解解构工具，因此我将尝试通过一个小例子向您解释。

解构允许从json对象和数组中提取属性，并将其分配给变量。此功能使您可以使代码最少并易于阅读。

这是一个小例子：假设我有这样的状态对象：

{
  userInfos: {
    username: 'user1',
    email: 'example@xyz.com'
  },
  profileInfos: {
    ...
  },
  ...
}

如果我想从userInfos访问用户名和电子邮件，我应该写this.state.userInfos.username和this.state.userInfos.email。想象一下，如果我在函数或render方法中使用这些属性3到4次，我的代码将会增长并且可读性降低。

作为解决方案，我可以将userInfos属性分配给变量，以便编写：

const username = this.state.userInfos.username;
const email = this.state.userInfos.email;

在这里，我可以通过这种方法直接使用用户名和电子邮件，但是这里的问题是，如果我在userInfos中有10个属性，那么我应该编写10个变量声明。

从ES6开始，我们可以使用解构分配。现在，我们可以在一行中将用户名和电子邮件分配给变量

const { username, email } = this.state.userInfos;

我希望我的例子很清楚，您可以在Google中搜索有关销毁的信息，并且会找到更清晰的说明和例子。

如果破坏状态，本机无法获取当前状态值

1 个答案: