How to use Lodash _.find() and setState() to change a value in the state?

问题

I'm trying to use lodash's find method to determine an index based on one attribute. In my case this is pet name. After that I need to change the adopted value to true using setState. The problem is however; I do not understand how to combine setState and _.find()

As of right now I have this written. My main issue is figuring out how to finish this.

  adopt(petName) {
    this.setState(() => {
      let pet = _.find(this.state.pets, ['name', petName]);
      return {
        adopted: true
      };
    });
  }

This does nothing at the moment as it is wrong, but I don't know how to go from there!

回答1:

In React you usually don't want to mutate the state. To do so, you need to recreate the pets array, and the adopted item.

You can use _.findIndex() (or vanilla JS Array.findIndex()) to find the index of the item. Then slice the array before and after it, and use spread to create a new array in the state, with the "updated" item:

adopt(petName) {
  this.setState(state => {
    const petIndex = _.findIndex(this.state.pets, ['name', petName]); // find the index of the pet in the state

    return [
      ...state.slice(0, petIndex), // add the items before the pet
      { ...state[petIndex], adopted: true }, // add the "updated" pet object
      ...state.slice(petIndex + 1) // add the items after the pet
    ];
  });
}

You can also use Array.map() (or lodash's _.map()):

adopt(petName) {
  this.setState(state => state.map(pet => pet.name === petName ? ({ // if this is the petName, return a new object. If not return the current object
    ...pet,
    adopted: true
  }) : pet));
}

回答2:

Change your adopt function to

adopt = petName => {
  let pets = this.state.pets;
  for (const pet of pets) {
    if (!pet.adopted && pet.name === petName) {
      pet.adopted = true;
    }
  }
  this.setState({
    pets
  });
};

// sample pets array

let pets = [
  {
    name: "dog",
    adopted: false
  },
  {
    name: "cat",
    adopted: false
  }
]

来源：https://stackoverflow.com/questions/56420939/how-to-use-lodash-find-and-setstate-to-change-a-value-in-the-state

标签

reactjs

lodash

setstate