javascript - 进行异步调用后在哪里设置状态？

Question

我正在尝试从 dynamo 数据库中提取一些数据，将其存储在我的本地状态中，然后使用它进行操作。我可以提取数据，我认为我可能需要处理异步内容，所以我使用异步等待

async componentDidMount() {
//aws secret key stuff here
const ddb = new AWS.DynamoDB({ apiVersion: '2012-10-08' });
    const res = await ddb.scan(params, (err, data) => {
      if (err) {
        console.log(err, err.stack);
      } else {
        console.log(data);
      }
    });
    this.setState({ products: data })
}

我有几个问题。我基本上想等到扫描完成，这样我就知道数据已成功提取，然后我可以设置状态。

首先，linter 提示我不应该在 componentDidMount 中设置状态，那么我应该在哪里设置它？

其次，在使用数据之前等待某些请求完成是正确的方法吗？

我做了一个 console.log(data)，其中有 this.setState({products: data})，它记录了正确的事情。

但是当我尝试像这样遍历我的数据时:

{this.state.products.Items.map((product) => (

我无法读取未定义的 map ？？

Answer 1

在 componentDidMount 中设置状态会导致额外的渲染。 ( reference )

Calling setState() in this method will trigger an extra rendering, but it will happen before the browser updates the screen. This guarantees that even though the render() will be called twice in this case, the user won’t see the intermediate state. Use this pattern with caution because it often causes performance issues. It can, however, be necessary for cases like modals and tooltips when you need to measure a DOM node before rendering something that depends on its size or position.

在某些情况下，您必须在 componentDidMount 上调用一些 API 和 setState。

我发现您需要更改 2 处。似乎 ddb.scan 获得回调作为第二个参数，因此您不需要 promise 的 ascyn/await。

在这种情况下，您需要在回调中使用 setState。

ddb.scan(params, (err, data) => {
  if (err) {
    console.log(err, err.stack);
  } else {
    console.log(data);
    this.setState({ products: data });
  }
});

如果您在其他应用中使用 Promises，则可以使用 async/wait 并在 await 之后使用 setState。

const res = await promisecall();
this.setState(res.stuff);

在访问您的产品数组之前，您应该检查它是否已经存在。

this.state.products.Items

在第一次渲染过程中未定义。 componentDidMount 运行并设置它，但是

this.state.products.Items.map

已经抛出错误。

做类似的事情

this.state.products && 
this.state.products.Items &&
this.state.products.Items.length > 0 &&
this.state.products.Items.map(etc...)

它只会在 this.state.products.Items 存在时运行。您这样做是为了防止第一次渲染(在 componentDidMount 中设置状态之前)失败。