在 React 中将对象从一个对象数组复制到另一个对象

Question

我有 this.props.person 这样的：

person = [{id: 1, name: John, age: 20},
          {id: 2, name: Kate, age: 30},
          {id: 3, name: Mike, age: 25}]

我有空的 this.state.newPerson: []。

函数获取id值，在this.props.person中搜索这个id的对象，并将这个对象添加到this.state.newPerson中。 可以重复几次。

例如：我用 id=1 和 id=3 调用了 funcion addPerson 两次。 结果我应该得到

this.state.newPerson: [{id: 1, name: John, age: 20}, {id: 3, name: Mike, age: 25}].

我试过：

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 });
  }

事实上，我得到了类似[personToList {id: ...}]

我该如何解决？

Answer 1

您想将personToList添加到list数组，而不是使用对象{ personToList: personToList }分配整个数组。

您可以改用传播语法。

例子

 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>

Answer 2

Object.assign 不适用于此用例场景。 您正在尝试添加到状态上的数组。

试试这个：

addPerson(idPerson) { 
  let list = [...this.state.newPerson];
  let personToList = this.props.person.find(el => el.id === idPerson);
  list.push(personToList);
  this.setState({
    newPerson: list
  });
}

Answer 3

find仅返回第一个匹配项。 使用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

Answer 4

如果 this.state.newPerson 是一个数组，为什么要使用 Object.assign ？ 只需使用list.push(personToList)但像这样设置你的状态this.state.newPerson = [];

Answer 5

Object.assign 用于组合两个javascript object.personToList 已经是一个对象。

const newP = Object.assign(list, personToList);

实际上，您可以使用 push 来修复它。

const newP = list.push(newP)

Answer 6

尝试这个：

addPerson(idPerson) { 
    this.setState({
      newPerson : this.state.newPerson.concat(this.props.person.find( i => i.id === idPerson))
    })
  }
}

或者

 addPerson(idPerson) { 
    this.setState({
      newPerson : [this.state.newPerson, this.props.person.find( i => i.id === idPerson)]
    })
  }