如何在反應 state 中更新數組中的值？

Question

我正在嘗試更新 state 數組中的值。

初始 state 值如下：

const [itemList, setItemList] = useState([
{
    "id": "0",
    "items": [
        {
            "key": "Player name",
            "value": "Sandy",
            "type": "trained"
        },
        {
            "key": "Player status",
            "value": "status here",
            "type": "untrained"
        }
    ]
},
{
    "id": "1",
    "items": [
        {
            "key": "Check Number",
            "value": "0027858403",
            "type": "untrained"
        },
        {
            "key": "Check Date",
            "value": "01/22/2010",
            "type": "trained"
        }
    ]
} ]);

我想更新數組元素“type”的值，通過使用數組的“id”元素將其從“未訓練到訓練”設置。

例如：單擊按鈕時，我想為第二個數組元素更新“type: trained”，其中“key = Check Number”。

我的 function 如下所示：

onClickHandler=(id, data)=>{
    setItemList((prev)=>prev.map((item)=>{
        if(item.id === id){
            item.items.map((itm)=>{
                if(itm.key === data){
                  return {...itm,type: 'trained'}                        
                }  
                else{
                    return itm;
                }
            })
        }  
        else{
          return item;
        }
    }))
}

因此，onClick={onClickHandler(1, 'Check Number')} 其中“1”是數組 ID，“Check Number”是“key”元素的值。

---

最終的 output 應該是這樣的：

const [itemList, setItemList] = useState([
{
    "id": "0",
    "items": [
        {
            "key": "Player name",
            "value": "Sandy",
            "type": "trained"
        },
        {
            "key": "Player status",
            "value": "status here",
            "type": "untrained"
        }
    ]
},
{
    "id": "1",
    "items": [
        {
            "key": "Check Number",
            "value": "0027858403",
            "type": "trained"
        },
        {
            "key": "Check Date",
            "value": "01/22/2010",
            "type": "trained"
        }
    ]
} ]);

Answer 1

您需要無條件地從映射器內部返回。 如果 ID 匹配，則返回一個新的 object，否則返回現有的 object。

您幾乎肯定也不需要使用回調版本，因為這是一個點擊處理程序。

onClickHandler = (id, key) => {
    setItemList(itemList.map(obj => obj.id !== id ? obj : ({
        ...obj,
        items: obj.items.map(
            item => item.key !== key ? item : { ...itm, type: 'trained' }
        )
    })));
};