按旧状态和承诺结果计算新状态

Question

我有一个项目不支持generators 和async await 语法。

我使用async await 构建了以下代码，因为我没有看到任何其他方法：

 this.setState(async lastState => {
      const newImagesAmount = lastState.images.length + 20;
      const newImages = await this.getImages(this.props.tag, newImagesAmount);
      return {
        images: newImages
      };
    });

为什么？在这种特殊情况下，新状态由旧状态和promise 的结果共同构建。

如何将其转换为非 async await 语法？

---

注意（更新）：

由于当前的两个答案都包含相同的错误，please read @dhilt answer + responses首先解释什么是错误。

Answer 1

首先，在setState() 中使用await 是不可能的。不是因为你的项目的限制，而是因为每个带有await 的函数都应该事先声明为async。它应该使用await 表示法或.then() 链接调用。所以传入.setState 的回调应该是async 并使用await 调用，但我们知道React 不能以这种方式工作。 React 期望普通函数并在没有 await 或 .then() 的情况下调用它。它看起来像react-dom 模块中的func.apply(context, funcArgs)。也没有检查它是否返回 Promise。

让我们回到你的最终目标。据我了解，这是关于确保加载延迟数据后状态仍然一致。这是另一个限制。除了同步 XHR（这是非常糟糕的做法）之外，没有办法暂停所有执行，直到数据到来。也就是说：无论你做什么，你都不能 100% 确定 state 没有在“请求已发送”和“数据已接收”步骤之间发生变异。 await 和功能性 setState 都不允许冻结执行。是的，您的代码仍然引用“prevState”变量，但它可能不再是实际组件的状态！

那么你可以做什么：

1. 在将另一个 XHR 发送到同一端点之前中止正在进行的 XHR（应该适用于读取操作；对写入操作没有意义）
2. 在处理响应时解析请求参数，以有效的方式将其注入状态（例如，第一个响应是针对 1..10 图像，下一个响应是针对 11..20 - 所以您可以使用它并将第二个响应注入适当的索引使前 10 个仍未初始化）
3. 设置一些标志来阻止新请求，直到正在进行的请求完成

附：因此从 setState 函数内部发出请求会导致混淆，并且不会增加任何额外的灵活性。

Answer 2

如果问题中的代码是正确的，并且您只想清除 async/await 以支持传统的 return promise.then(...) 语法，请执行以下操作：

this.setState(lastState => {
    const newImagesAmount = lastState.images.length + 20;
    return this.getImages(this.props.tag, newImagesAmount)
    .then(newImages => ({ 'images': newImages });
});

以下简化也可能起作用：

this.setState(lastState => {
    return this.getImages(this.props.tag, lastState.images.length + 20)
    .then(images => ({ images });
});

Answer 3

我假设这里的 lastState 实际上只是更新之前的当前状态。试试这样的：

const imageLength = this.state.images.length + 20
this.getImages(this.props.tag, imageLength)
     .then(newImages => {
     this.setState({images: newImages})
}

Answer 4

我想你可能想要这样的东西

const newImagesAmount = this.state.images.length + 20;
this.getImages(this.props.tag, newImagesAmount).then(newImages => 
  this.setState(prevState => ({
      ..prevState,
      images: newImages
    })
);

首先，您请求新图像，该请求基于当前状态。然后（当结果到达时）你更新状态。

---

允许在请求完成之前保护异步逻辑免受多次执行的更新版本

if (!this.state.pending) {
  this.setState(lastState => {
    const newImagesAmount = lastState.images.length + 20;
    this.getImages(this.props.tag, newImagesAmount).then(newImages => 
      this.setState(prevState => ({
          ...prevState,
          pending: false,
          images: newImages
        })
    ).catch(() =>
       this.setState(prevState => ({
          ...prevState,
          pending: false
        })
    );
    return {
      ...lastState,
      pending: true
    }
  });
}