Question

在状态下，我的数据数组看起来像这样

{
    "offers" : [
        {
          "model": "shoes",
          "availability": false,
          "id": 1
        },
        {
          "model": "t-shirt",
          "availability": true,
          "id": 2
        },
        {
          "make": "belt",
          "availability": false,
          "id": 3
        }
    ]
}

我的任务是更改辅助功能字段。我有一个按钮-更改可用性。单击它后，我想更改单个字段的可用性

 changeAvailability = (ailability, id) => {
    console.log(ailability)
    console.log(id)
    const { data } = this.state;
    let newData = [...data]
    this.setState({
      data: newData.map(x => x.id === id ? x.ailability = !ailability : ailability )
    })
  }

我创建了一个无效的功能。

我的想法是：我单击该元素，然后传递给该元素的ID和可访问性。在此函数中，我创建状态的副本。在正确的地方，我更改了可用性，并将所有信息发送给了州。

此功能不起作用，什么也没发生，我不知道如何解决

Answer 1

好像map函数什么也不返回...

可能是这样

changeAvailability = (ailability, id) => {
    console.log(ailability)
    console.log(id)
    const { data } = this.state;
    let newData = [...data]
    const updateItem = (x) => {
       if (x.id === id) {
           x.ailability = !ailability;
       }
       return x;
    };

    this.setState({
      data: newData.map(updateItem)
    })
  }

Answer 2

我假设您想单击一个传递商品ID和商品的可用性的元素，然后在offers数组中的this.setState()数组中找到一个匹配条目（在传递的ID上）。声明所找到对象的可用性，并将其更改为您在函数中传递的内容。

我建议使用changeAvailability = (passedAvail, passedID) => { this.setState((prevState) => { // Make a copy of the offers array in the state const offersArray = prevState.offers // Find index of matching obj by id const matchObjIndex = offersArray.findIndex( (offerObj) => ( offerObj.id === passedID ) ) // If a match was indeed found if (matchObjIndex > -1) { // Find matching obj from index obtained const matchObj = offersArray[matchObjIndex] // Change the availibility of the matched obj and obtain a modified obj const modmatchObj = Object.assign(matchObj, { availability: passedAvail }) // Replace the offer obj by index in the offers array. offersArray.splice(matchObjIndex, 1, modmatchObj); } // Finally set state with the updated offers lists // If no match was found, it will return the old offers array return {offers: offersArray } }) }允许您使用的回调，并在调用setState之前提供对先前状态副本的引用。

mongod

Answer 3

您可以尝试执行以下操作：

 changeAvailability = (availability, id) =>
        this.setState(prevState => {
            return {
                offers: prevState.offers.map((e, i) =>
                    e.id !== id ? e : { ...prevState.offers[i], availability }
                )
            };
        });

解决方案的问题在于，在绘制地图时，您不应修改要迭代的项目，而应该返回想要添加的任何新数据。

状态中一个值的变化反应

3 个答案: