Node.js 无法读取属性'；地图'；所有的承诺都没有定义

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

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

在这方面，我有：

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 => (

现在，由于我有两个查询，我需要将其更改为：

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？

问题如下：

const { data: products } = await getCatProducts(catslug);

如果我理解正确，当您发送一个值时，您发送它的方式如下：

res.status(200).json(products); // an array

但是现在您正在发送一个

对象

，它进一步包含两个数组产品和子类别

您需要做的是添加以下更改以使其正常工作：

const obj = await getCatProducts(catslug);
const products = obj.products
const subcats = obj.subcats

---

这是因为你的状态的初始形状

state = {
    products: []
  };

您可以看到this.state.products已经定义为数组，因此可以映射到它（尽管它是空的）。但是this.products.products不是数组，它是未定义的，因此尝试映射将返回您看到的错误。您输入的行

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

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

另一种修复方法是将初始状态形状设置为与最终状态形状匹配。i、 e

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（）