reactjs - 尝试从 componentWillMount 中异步调用的返回值设置状态时，未定义文档

Question

我在组件的 componentWillMount 调用中获取数据[实际上它在 mixin 中，但想法相同]。 ajax 调用返回后，我尝试 setState，但收到文档未定义的错误。

我不知道如何解决这个问题。有什么需要等待的吗？我应该在其中执行 setState 的 promise 或回调？

这就是我正在尝试做的事情:

componentWillMount: function() {
    request.get(this.fullUrl()).end(function(err, res) {
        this.setState({data: res.body});
    }.bind(this));
}

Answer 1

在 componentWillMount 内执行异步操作并不是一个好主意。您确实应该在 componentDidMount 中执行此操作，因为如果组件执行的第一个任务是获取一些数据 - 您可能希望它在获取该数据之前显示一个旋转器或某种加载通知程序。

因此，我个人从来不做你正在做的事情，每次都选择 componentDidMount。然后，您可以设置初始状态，以便第一个安装渲染向用户显示加载旋转器或某种其他类型的初始状态。 ajax 会触发，并在收到响应后进行更新。这样你就知道你正在处理用户连接不良的情况，例如移动设备接收不良等，通过让用户知道组件正在加载一些数据(这就是他们不加载数据的原因)来提供良好的用户体验。还没有看到任何东西。

综上所述，为什么在 componentWillMount 内执行某些异步函数时会出现错误 - 因为如果您只是在生命周期函数本身内调用 this.setState，它会正常工作，对吗？这是 React 工作方式的一个怪癖，据我所知，它至少从 React 0.11 就已经存在了。当您挂载组件时，在 this.setState 内同步执行 componentWillMount 效果很好(尽管 0.12.x 中存在一个错误，即任何传递给 setState 内的 componentWillMount 的函数回调都不会被执行)。这是因为 React 意识到您正在为尚未安装的组件设置状态 - 这是您通常无法执行的操作 - 但它允许在像 componentWillMount 这样的生命周期函数中特别设置状态。但是，当您异步 setState 调用时，它不再受到特殊处理，并且适用正常规则 - 您不能在未安装的组件上使用 setState 。如果您的 ajax 请求返回得非常快，则完全有可能您的 setState 调用发生在 componentWillMount 阶段之后但在组件实际安装之前 - 并且您会收到错误。如果事实上你的 ajax 请求没有看起来那么快，比如说花了一秒或更长时间，那么你可能不会注意到错误，因为你的组件很可能在一秒钟内完全安装，所以你的 setState 调用按正常规则再次有效。但你基本上在这里给自己一个竞争条件，为了安全起见，使用 componentDidMount 代替 - 因为它也因为我上面提到的其他原因更好。

有些人说你可以在 setTimeout 内执行此操作，他们是正确的，但这基本上是因为你将请求所需的时间增加到最小值 x，这通常足以强制它在 setState 之后执行组件已安装 - 如此有效，您不妨在 setState 内执行 componentDidMount，而不是依赖于 setTimeout 计时器内的组件安装。

TL;DR 答案:

您可以在 setState 中同步使用 componentWillMount，但不建议这样做。理想情况下，在任何同步执行此操作的情况下，您都可以使用 getInitialState。

但是，在 setState 中异步使用 componentWillMount 是极其不明智的，因为它会让您面临基于异步任务所需时间的潜在竞争条件。请改用 componentDidMount 并使用该初始渲染来显示加载旋转器或类似的:)