如何在地图内多次传播算子

时间:2019-02-15 13:29:59

标签: javascript reactjs

List<Integer> list = new ArrayList<>();
list.add(1);
list.add(3);
list.add(5);
list.add(7);
list.add(9);

Random random = new Random();
int num = list.get(random.nextInt(list.size()));

一个有效的示例:https://jsfiddle.net/dapyb0ef/

class TodoApp extends React.Component { state = { item: [{fruit: 'apple'}] } handle=(name, value, num)=>{ console.log(name, value, num) this.setState(({item}) => ({ item: item.map((cv,i)=>( {...cv, [name]: {[num] :value}}) ) }), ()=>{ console.log(this.state.item)}) } render() { return ( <div> <Input name={'items'} onChange={this.handle}/> </div> ) } } ReactDOM.render(<TodoApp />, document.querySelector("#app"))

每次输入一个字段时,它将覆盖前一个字段。因此它仅打印item: item.map((cv,i)=>( {...cv, [name]: {[num] :value}})中的一项,例如

items

我要实现的是在每个输入字段中键入内容时保留所有项目

fruit: "apple"
items: {2: "123"}

所以我的问题是 fruit: "apple" items: {0: "typed string..."}, {1: "typed information"}, {2: "typed information"} 我如何存储item: item.map((cv,i)=>( {...cv, [name]: {[num] :value}})并保留所有信息。谢谢

2 个答案:

答案 0 :(得分:1)

您只需要散布内部物品,就像

 this.setState(({item}) => ({
    item: item.map((cv,i)=>( {...cv, [name]: {...cv[name], [num] :value}})
)

Working demo

答案 1 :(得分:1)

您正在做的事情是传播简历,然后完全覆盖他的items属性,您忘了传播现有的cv.items内容

{item: item.map((cv,i)=>( {...cv, [name]: {...cv[name], [num] :value}})}