以下代码输出两个单独的表单部分。一切正常,但是我有两个相似的for()循环和两个相似的map()函数。我想学习如何使用for()循环和map()函数编写嵌套脚本,以便可以向state.program对象添加更多属性,并且表单将自动更新,而无需添加其他for()或地图()。
基本上,我试图遍历对象,创建数组以映射到我的组件道具。我在想这是错误的方式吗?
我希望对我的问题的描述是有意义的。这是React组件...
class CreateProgram extends Component {
state = {
program: {
description: {
title: {
label: 'Program title',
value: ''
},
category: {
label: 'Program category',
value: ''
}
},
location: {
location_title: {
label: 'location title',
value: ''
},
location_coor: {
label: 'location coordinates',
value: null
}
}
}
};
render() {
return <Program items={this.state.program} />;
}
}
export default CreateProgram;
class Program extends Component {
render() {
const { items } = this.props;
const descriptionArray = [];
const locationArray = [];
for (let key in items.description) {
descriptionArray.push({
id: key,
value: items.description[key]
});
}
for (let key in items.location) {
locationArray.push({
id: key,
value: items.location[key]
});
}
return (
<>
<div className="form-section">
{descriptionArray.map(element => (
<Input
label={element.value.label}
value={element.value.value}
changed={event =>
changed(event, element.id, 'program', 'description')
}
/>
))}
</div>
<div className="form-section">
{locationArray.map(element => (
<Input
label={element.value.label}
value={element.value.value}
changed={event =>
changed(event, element.id, 'program', 'location')
}
/>
))}
</div>
</>
);
}
}
export default Program;
您可以简化父状态:
state = {
description: {
title: {
label: "Program title",
value: ""
},
category: {
label: "Program category",
value: ""
}
},
location: {
location_title: {
label: "location title",
value: ""
},
location_coor: {
label: "location coordinates",
value: null
}
}
};
然后将它们分别传递给子组件:
render() {
return (
<Program
description={this.state.description}
location={this.state.location}
/>
);
};
并在子组件中使用Object.entries返回的数组来映射每个元素:
Object.entries(this.props.description).map(([key, value]) => (
<Input
key={key}
label={value.label}
value={value.value}
changed={event => changed(event, key, "program", "description")}
/>
));
Object.entries(this.props.location).map(([key, value]) => (
<Input
key={key}
label={value.label}
value={value.value}
changed={event => changed(event, key, "program", "location")}
/>
));
本文收集自互联网,转载请注明来源。
如有侵权,请联系 [email protected] 删除。
我来说两句