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 }。

您可以改用spread syntax。

示例

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

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 3

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

Answer 4

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 5

Object.assign用于合并两个JavaScript对象。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)]
    })
  }

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

6 个答案: