Question

当我像这样运行代码时，控制台显示一个空数组。但是，当我使用console.log（res.data）时，我可以毫无问题地获得员工期望的json对象。

  state = {
    userList: [],
    firstName: "",
    lastName: "",
    position: ""
  };

loadUsers = () => {
  API.getUsers()
    .then(res =>
      this.setState({ userList: res.data, firstName: "", lastName: "", 
      position: "" })
    )
    .then (console.log(this.state.userList))
    .catch(err => console.log(err));
};

以任何一种方式运行代码，我还会在JSON.parse（）错误消息中收到Uncaught SyntaxError：JSON输入意外结束的消息。

Answer 1

     .then (console.log(this.state.userList))

立即调用console.log，记录当前状态（甚至在异步内容开始之前的状态），console.log返回undefined，整个结果求值为

 .then(undefined)

相反，将函数传递给.then，例如

.then(() => {
  console.log(this.state);
});

但是，由于setState也是异步的，因此无法可靠地工作。因此，您应该使用可以传递给setState的回调，以便在完成异步操作并更新状态后登录：

this.setState(
  { userList: res.data, firstName: "", lastName: "", position: "" },
  () => console.log("done", this.state)
)

Answer 2

setState是异步的，因此不能保证在用console.log检查状态值时更新状态值。

async/await进行救援

state = {
  userList: [],
  firstName: "",
  lastName: "",
  position: ""
};

loadUsers = async () => {
  const response = await API.getUsers();
  this.setState({
    ...state,
    userList: response.data, 
  }, () => console.log('[user list]', this.state.userList)
};

更新

添加了传播语法

this.setState无法从res.data传递信息

2 个答案: