javascript - 将 props 数组传递给子组件

Question

我正在尝试将对象数组作为 Prop 从父组件传递到子组件，然后对其进行映射并将其显示在子组件中。当我尝试映射它时没有任何反应，当我对它进行 console.log 时，它会显示我的对象数组。有什么区别，这里有什么问题？

class ClothingBuyingOptions extends Component {

state = {
    size: '',
    color: '',
    showShoppingBag: false,
    items: []
  }

  addItemToBag = () => {
    const { size, color } = this.state;
    this.setState({
      showShoppingBag: true,
      items: [ ...this.state.items, [{ size: size, color: color }]]
    });
  }

  render() {
      return (
        <div>
          <button
            onClick={this.addItemToBag}>
              Add to Bag
          </button>
          <ShoppingBag items={this.state.items} />  
        </div>
      );
  }
}


class ShoppingBag extends Component {

  render() {
    const items = this.props.items.map((item, index) =>
      <div
        key={index}>
        <p>{item.size}</p>
        <p>{item.color}</p>
      </div>
    )
    console.log(this.props.items)
    return (
      <div className="container">
       {items}
      </div>
    );
  }
}

Answer 1

这是因为您将数组存储在数组中，然后尝试访问数组上的对象属性。

改变这一行:

items: [ ...this.state.items, [{ size: size, color: color }]]

对此:

items: [ ...this.state.items, { size: size, color: color }]

使用代码构建状态的方式是这样的:

items: [
 [ { size: '', color: ''} ],
 [ { size: '', color: ''} ]
]

你希望它是这样的:

items: [
 { size: '', color: ''},
 { size: '', color: ''}
]

此外，由于您的对象键和值相同，您可以将对象定义为 {size, color}，这与 {size: size, color: color 相同}