node.js - 无法使用 Promise all 读取未定义的属性 'map'

Question

我最初只是在 node.js 中运行一个查询，但现在需要两组数据，因此我运行了两个查询并使用 Promise.all，如下所示:

 Promise.all([products, subcats]);
  res.status(200).json({
    products,
    subcats
  });

在 React 中我有:

class ProductList extends Component {
  state = {
    products: []
  };

  async componentDidMount() {
    const catslug = this.props.match.params.catslug;
    const { data: products } = await getCatProducts(catslug);
    this.setState({ products: products });
  }

当我只运行一个查询时，我运行这个查询没有任何问题:

this.state.products.map(product => (

现在因为我有 2 个查询，我需要将其更改为:

this.state.products.products.map(product => (

但是一旦我这样做，我就会收到错误:

Cannot read property 'map' of undefined

所以，我将其更改为这样，现在它可以正常工作了:

{this.state.products.products &&
this.state.products.products.map(product => (

我的问题是为什么它以前不需要输入 ... && 位就可以工作，但现在我必须将它与 Node.js 中的 Promise.all 一起使用？

Answer 1

这是因为你所在州的初始形状

state = {
    products: []
  };

您会看到 this.state.products 已定义为数组，因此可以对其进行映射(尽管为空)。然而 this.products.products 不是一个数组，它是未定义的，因此尝试映射将返回您所看到的错误。您输入的行

{this.state.products.products &&
this.state.products.products.map(product => (

在尝试映射数组之前检查该数组是否存在(在异步代码完成并定义数组之前，该数组的计算结果不会为 true)。

另一种解决方法是将初始状态形状设置为与最终状态形状相匹配。即

state ={
    products:{
        products:[]
    }
};

或者，如果您不想要嵌套的产品属性，您可以更改

async componentDidMount() {
    const catslug = this.props.match.params.catslug;
    const { data } = await getCatProducts(catslug);
    this.setState({ products: data.products });
  }

并返回到旧的 this.state.products.map()