javascript - this.setState 无法传递来自 res.data 的信息

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

无论以何种方式运行代码，我都会收到 Uncaught SyntaxError: Unexpected end of JSON input at JSON.parse () 错误消息。

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