javascript - 将 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>
);
}
}
解决方案
这是因为您将数组存储在数组中,然后尝试访问数组上的对象属性。
更改此行:
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}
推荐阅读
- r - `c('q01') %in% c('q01','q04')` 应该为 TRUE,但在条件循环中不起作用
- javascript - 如何撤销身份 API 令牌(Chrome 扩展)
- git - 无法删除添加到暂存区的行
- .htaccess - 新主机上的奇怪 .htaccess 配置
- javascript - Angular 7 使用 html2canvas 导出 pdf div 内容的最佳方法
- javascript - 如何在匿名函数之外访问为 onreadystatechange 定义的函数中的变量数据?
- git - 如何在 GitHub 上编辑/推送/拉取父分支的父级
- google-bigquery - 识别重复值 - Google BigQuery
- php - 在第 3.1 部分中,我剪切并粘贴了 php 文本,将其保存到 service.php 文件中,当我通过 http://mydomain/service.php 运行该文件时没有显示任何内容
- excel - 使用 =HYPERLINK-Formula 运行 Excel-Macro(通过 Selection_Change 事件)