TypeError: Cannot read properties of undefined (reading 'title')

Question

我遇到了一个奇怪的错误！我正在尝试在 UI 上动态呈现产品。当我的代码中有：

 render () {
    const cart = this.props.cart
    return (
      <>
        <PanelHeader size="sm" />
        <div className="content">
          <Row>
            <Col xs={12}>
              <Card>
                <CardHeader>
                  <CardTitle tag="h4">Products List</CardTitle>
                </CardHeader>
                <CardBody>
                <table class="table table-striped table-hover">
                  <thead>
                    <tr>
                      <th scope="col"><strong>#</strong></th>
                      <th scope="col"><strong>Name</strong></th>
                      <th scope="col"><strong>Code Item</strong></th>
                      <th scope="col"><strong>Quantity</strong></th>
                      <th scope="col"><strong>Price Total</strong></th>
                    </tr>
                  </thead>
                  {cart.length > 0 && 
                    <tbody>
                    <tr>
                      <th scope="row">1</th>
                      <td>{cart[0].title}</td>
                      <td>{cart[0].code}</td>
                      <td>{cart[0].quantity}</td>
                      <td>{cart[0].price}</td>
                    </tr>
                    </tbody>}
                </table>
              </CardBody>
            </Card>
          </Col>
        </Row>
      </div>
    </>
    )
  }
}

它呈现第一个项目，但是如果我尝试选择第三个项目：即 {cart[2].title} 等等，就会出现“标题”未定义的错误。另外，如果我尝试给 [i] 给我一个“i”未定义的错误！任何想法如何解决它？提前致谢！

Answer 1

如果您需要呈现购物车数组中的所有商品，请使用：

              {cart.map(c =>  
                <tbody>
                <tr>
                  <th scope="row">1</th>
                  <td>{c.title}</td>
                  <td>{c.code}</td>
                  <td>{c.quantity}</td>
                  <td>{c.price}</td>
                </tr>
                </tbody>}

Answer 2

tbody 跳出循环，需要为每一项添加key

<tbody>
{cart.length > 0 && cart.map((item, index) => (             
   <tr key={item.id}>
     <th scope="row">{index}</th>
     <td>{item.title}</td>
     <td>{item.code}</td>
     <td>{item.quantity}</td>
     <td>{item.price}</td>
  tr>))}
</tbody>

TypeError: Cannot read properties of undefined (reading 'title')

TypeError: Cannot read properties of undefined (reading 'title')

javascript

reactjs

redux