javascript - 无法读取未定义的属性 'category' - 尝试使用状态数据时出错

Question

我正在尝试从状态获取一些数据来显示。如果我在 componentDidMount 中 console.log 它，我就会得到我想要的，但是如果我尝试在 render() 中使用它，则会出现错误:

TypeError: Cannot read property 'category' of undefined

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 });
  }

  render() {
    return (
      <>
        <Container fluid={true} className="product_header mb-5">
          <h1 className="product_header-text">
            {this.state.products[0].category.name}
          </h1>
        </Container>

Answer 1

有时，产品可能为空(就像在获取数据之前)，一旦组件渲染并首次渲染，DidMount 就会被调用，它会抛出错误，因为产品状态中没有任何内容是空数组。你可以这样处理。

<Container fluid={true} className="product_header mb-5">
          <h1 className="product_header-text">
            {this.state.products[0] && this.state.products[0].category.name}
          </h1>
</Container>

您还可以添加加载状态和 isEmpty 状态，以便在 api 回调后您可以检查数据是否为空，以便您可以显示空状态组件。

解释为什么会发生:

products[0] 将给出 undefined

如果我们检查

typeof undefined 返回'undefined'，即它不是对象

所以在这种情况下我们正在检查

products[0].category 表示 undefined.category

所以JS总是会抛出错误。

TypeError: Cannot read property 'category' of undefined