在 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)]
    })
  }