使用占位符信息正确构造数组，直到填充所选对象为止
使用占位符信息正确构造数组，直到填充所选对象为止
提问于 2019-06-05 03:42:40
这是一个令人困惑的问题，我不确定如何正确地谷歌它，所以我道歉，如果它已经被回答。我正在尝试创建一个自己构建的产品类型的应用程序，允许用户选择他们完成的产品的每个部分，但我不确定我应该如何构建我的数据以正确存储用户选择。现在，我有一个结构如下的数组：
selectedParts: [
{
component: "color",
selected: null,
},
{
component: "wheels",
selected: null,
},
{
component: "size",
selected: null,
},
(...etc.)
],当他们选择他们的选择时，它会用part对象填充适当对象的“selected”字段。下面是我运行来填充该数组的函数(我正在使用React，该数组处于我的状态)：
onSelectPart = part => {
let selectionIndex = this.state.selectedParts.findIndex(
i => i.component === this.state.partCategory
)
let cloneArray = [...this.state.selectedParts]
cloneArray[selectionIndex].selected = part
this.setState({
selectedParts: cloneArray,
})
}通过找到他们当前从中选择的类别的索引，将该部分放入数组中，然后克隆该数组，并使用该索引将该部分添加到克隆的数组中，然后将新数组推送到该状态。
这对我来说是错误的，而且比它应该的更复杂。我想尝试将所有内容都保存在一个数组中，这样我就可以在最后映射它，并轻松地打印出它们的完整订单摘要。但是，如果这是错误的方法，那么推荐的方法是什么？将对象嵌套在“Order”对象中是不是比使用数组更好？
回答 1
Stack Overflow用户
发布于 2019-06-05 10:41:46
如果您可以选择使用哪种数据结构，那么使selectedParts成为对象对您来说会更容易，而且性能会更好，因为您可以在固定时间内访问对象(不必每次都循环访问)。属性将是component，值将是part对象：
selectedParts: {
color: null,
wheels: null,
size: null,
...
}然后更新它，你仍然想要复制和更新，但要容易得多：
const onSelectPart = part => {
const selectedParts = {...this.state.selectedParts};
selectedParts[this.state.partCategory] = part; // using "computed names"
this.setState({ selectedParts });
}最后，您可以打印循环遍历selectedParts条目的命令：
const printOrderSummary = selectedParts => {
// Note: [category, part] is just key, value of your object
for (let [category, part] of Object.entries(selectedParts)) {
if (part === null) part = 'Not selected'; // or skip the category, etc.
// this would be whatever you're currently doing to map your order
console.log(`${category}: ${part}`);
}
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/56450329
复制相关文章
相似问题
腾讯云开发者
