首页 > 解决方案 > 将 props 数组传递给子组件

问题描述

我正在尝试将一组对象从父组件传递给子组件作为道具,然后对其进行映射并将其显示在子组件中。当我尝试映射它时,什么也没有发生,当我 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>
    );
  }
}

标签: javascriptreactjs

解决方案


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

更改此行:

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}


推荐阅读