javascript - Copy object from one array of objects to another in React - Stack Overflow

admin管理员组

文章数量:1395895

I have this.props.person like this:

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: [].

Function get id value, searching object with this id in this.props.person, and add to this.state.newPerson this object. It can be repeats a few times.

For example: I call funcion addPerson twice with id=1 and id=3. 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: ...}]

How can I fix it?

I have this.props.person like this:

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: [].

Function get id value, searching object with this id in this.props.person, and add to this.state.newPerson this object. It can be repeats a few times.

For example: I call funcion addPerson twice with id=1 and id=3. 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: ...}]

How can I fix it?

• javascript
• arrays
• reactjs

Share Improve this question Follow asked Oct 28, 2018 at 11:56 JackJack 59433 gold badges1414 silver badges3232 bronze badges

Add a ment  | 

6 Answers 6

Sorted by: Reset to default 1

why do you use Object.assign if this.state.newPerson is an array? Just use list.push(personToList) but set your state like this this.state.newPerson = [];

You want to add personToList to the list array instead of assigning the entire array with the object { 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./ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare./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. 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
  });
}

Object.assign is used to bine two javascript object.personToList is already an object.

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

Actually,you could use push to fix it.

const newP = list.push(newP)

find returns only the first matching item. Use filter to get all of them.

Check the documentation: https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find https://developer.mozilla/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

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

本文标签： javascriptCopy object from one array of objects to another in ReactStack Overflow