Question

我正在尝试使用lodash的find方法来基于一个属性确定索引。就我而言，这是宠物的名字。之后，我需要使用setState将采用的值更改为true。但是问题是；我不明白如何结合使用setState和_.find（）

截至目前，我已经写了这篇文章。我的主要问题是弄清楚该如何完成。

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

此刻它什么都不做，因为它是错误的，但我不知道该怎么走！

Answer 1

在React中，您通常不想改变状态。为此，您需要重新创建pets数组以及所采用的项目。

您可以使用_.findIndex()（或香草JS Array.findIndex()）来找到商品的索引。然后在该数组的前后进行切片，并使用spread在状态下创建一个新数组，并添加“ updated”项：

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

您还可以使用Array.map()（或lodash的_.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));
}

Answer 2

将您的采用功能更改为

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

如何使用Lodash _.find（）和setState（）更改状态中的值？

2 个答案: