使用擴展運算子推入具有嵌套級別的物件陣列-有解無憂

我有一個包含以下格式的物件陣列的物件，這些物件存盤在一個狀態中

const [value, setVal] = useState({ available : [], done: [] })

done是具有以下結構的物件陣列

[{col: "test", val: ["abc","xyz"]}]

我正在撰寫一個將field和value作為輸入引數的函式。如果該欄位存在于done陣列中，那么我需要將其推入其相應的val陣列中。否則我需要創建一個新物件，然后將其推入。我怎樣才能做到這一點？

如何在這兩種情況下設定狀態？我嘗試過的代碼如下

function update(field, value){
    const filterIndex = value.done.findIndex((obj) => field === obj.col);
    if (filterIndex > -1) {
      value.done[filterIndex].val.push(value);
    } else {
      setVal({
        ...value,
        done: [
          ...value.done,
          {
            col: field,
            val: [value],
          }
        ]
      });
    }
}

uj5u.com熱心網友回復：

您應該為狀態使用單獨的變數名稱，而不是value因為該函式有一個區域變數也稱為value.

嘗試如下。

const [values, setVals] = useState({ available: [], done: [] })

function update(field, value) {
  const filterIndex = values.done.findIndex((obj) => field === obj.col);
  if (filterIndex > -1) {
    // get a copy of the previous state done values
    const updatedDone = [...values.done];
    // update the new value in the copy of the array
    updatedDone[filterIndex].val.push(value);
    // update the state
    setVals((prevValue) => ({ ...prevValue, done: updatedDone }));
  } else {
    // add the new entry for the new filed with the value
    setVals((prevValue) => ({
      ...prevValue,
      done: [
        ...prevValue.done,
        {
          col: field,
          val: [value],
        },
      ],
    }));
  }
}

uj5u.com熱心網友回復：

這可能是一種可能的解決方案：

代碼片段

const stateVal = { available : [], done: [{col: "test", val: ["abc","xyz"]}] };

const updateStateVal = (sv, field, value) => ({
  ...sv,
  done: (
    sv.done.map(ob => ob.col).includes(field)
    ? sv.done.map(ob => (
      ob.col === field
      ? {...ob, val: ob.val.concat([value])}
      : {...ob}
    ))
    : sv.done.concat([{ col: field, val: [value] }])
  )
});

console.log('existing col test: ', updateStateVal(stateVal, 'test', 'def'));
console.log('non-exist col test2: ', updateStateVal(stateVal, 'test2', 'def'));

如何使用

setVal(prev => ({...updateStateVal(prev, field, value)}));

解釋

目標是根據invalue的存在/不存在插入。fielddone
該方法updateStateVal需要 3 個引數，即 prev-state sv、 the field& thevalue
使用...擴展運算子按原樣列出 prev （即sv）的所有道具
現在，覆寫done道具
首先通過與每個陣列元素中的 s 匹配來檢查上一個狀態是否done已經存在。fieldcol
這是.map()結合使用來完成的.includes()
如果找到，則遍歷done陣列。

對于col匹配的陣列元素field，.concat現有val陣列與value。所有其他元素都按原樣進行。
如果未找到，只需.concat將單元素陣列 ( [{ col: field, val: [value]}]) 轉換為現有done陣列。

轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/425115.html

標籤：javascript 数组反应 ecmascript-6 反应钩子

上一篇：按索引從字串中洗掉特定行

下一篇：如何通過idmongodb將陣列加入物件