[英]Copy object from one array of objects to another in React
I have this.props.person like this:我有 this.props.person 这样的:
person = [{id: 1, name: John, age: 20},
{id: 2, name: Kate, age: 30},
{id: 3, name: Mike, age: 25}]
And I have empty this.state.newPerson: [].我有空的 this.state.newPerson: []。
Function get id value, searching object with this id in this.props.person, and add to this.state.newPerson this object.函数获取id值,在this.props.person中搜索这个id的对象,并将这个对象添加到this.state.newPerson中。 It can be repeats a few times.可以重复几次。
For example: I call funcion addPerson twice with id=1 and id=3.例如:我用 id=1 和 id=3 调用了 funcion addPerson 两次。 In result I should get结果我应该得到
this.state.newPerson: [{id: 1, name: John, age: 20}, {id: 3, name: Mike, age: 25}].
I tried:我试过:
addPerson(idPerson) {
const list = this.state.newPerson;
const personToList = this.props.person.find(el => el.id === idPerson);
const newP = Object.assign(list, { personToList });
this.setState({ newPerson: newP });
}
In fact, I got something like [personToList {id: ...}]事实上,我得到了类似[personToList {id: ...}]
How can I fix it?我该如何解决?
You want to add personToList
to the list
array instead of assigning the entire array with the object { personToList: personToList }
.您想将personToList
添加到list
数组,而不是使用对象{ personToList: personToList }
分配整个数组。
You could use the spread syntax instead.您可以改用传播语法。
Example例子
class App extends React.Component { state = { newPerson: [] }; addPerson = personId => { const list = this.state.newPerson; if (list.some(el => el.id === personId)) { return; } const personToList = this.props.person.find(el => el.id === personId); const newP = [...list, personToList]; this.setState({ newPerson: newP }); }; render() { return ( <div style={{ display: "flex" }}> <div> {this.props.person.map(p => ( <div id={p.id} onClick={() => this.addPerson(p.id)}> {p.name} </div> ))} </div> <div> {this.state.newPerson.map(p => ( <div id={p.id} onClick={() => this.addPerson(p.id)}> {p.name} </div> ))} </div> </div> ); } } ReactDOM.render( <App person={[ { id: 1, name: "John", age: 20 }, { id: 2, name: "Kate", age: 30 }, { id: 3, name: "Mike", age: 25 } ]} />, document.getElementById("root") );
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> <div id="root"></div>
Object.assign is not right for this use case scenario. Object.assign 不适用于此用例场景。 You're trying to add to an array on the state.您正在尝试添加到状态上的数组。
Try this instead:试试这个:
addPerson(idPerson) {
let list = [...this.state.newPerson];
let personToList = this.props.person.find(el => el.id === idPerson);
list.push(personToList);
this.setState({
newPerson: list
});
}
find
returns only the first matching item. find
仅返回第一个匹配项。 Use filter
to get all of them.使用filter
来获取所有这些。
Check the documentation: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter检查文档: https : //developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find https://developer.mozilla.org/en-US/docs/Web/JavaScript /Reference/Global_Objects/Array/filter
why do you use Object.assign if this.state.newPerson is an array?如果 this.state.newPerson 是一个数组,为什么要使用 Object.assign ? Just use list.push(personToList)
but set your state like this this.state.newPerson = [];
只需使用list.push(personToList)
但像这样设置你的状态this.state.newPerson = [];
Object.assign is used to combine two javascript object.personToList is already an object. Object.assign 用于组合两个javascript object.personToList 已经是一个对象。
const newP = Object.assign(list, personToList);
Actually,you could use push to fix it.实际上,您可以使用 push 来修复它。
const newP = list.push(newP)
try this:尝试这个:
addPerson(idPerson) {
this.setState({
newPerson : this.state.newPerson.concat(this.props.person.find( i => i.id === idPerson))
})
}
}
or或者
addPerson(idPerson) {
this.setState({
newPerson : [this.state.newPerson, this.props.person.find( i => i.id === idPerson)]
})
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.