UseState 更新 object 數組中的多個屬性

Question

使用解構，我可以用一個 function 更新多個 object 屬性：

const [serverRequest, setServerRequest] = useState({ ID: "", RAM: "", CPU: "", appInstaller: [{}] });

return (
  <div className="App">
    <label className="label">ID</label>
    <input
      className="input"
      type="text"
      name="ID"
      value={serverRequest?.ID}
      onChange={e =>
        setServerRequest({
          ...serverRequest,
          ID: e.target.value
        })
      }
    />
    <input
      className="input"
      type="text"
      name="RAM"
      value={serverRequest?.RAM}
      onChange={e =>
        setServerRequest({
          ...serverRequest,
          RAM: e.target.value
        })
      }
    />
  </div>
);

但是，我想在 object 陣列上執行此操作。 我怎樣才能做到這一點？

使用

const [serverRequests, setServerRequests] = useState([{ ID: "", RAM: "", CPU: "", appInstaller: [{}] }]);
const [selectedServer, setSelectedServer] = useState(0);

onChange={e =>
  setServerRequests({
    ...serverRequests[selectedServer],
    ID: e.target.value
  })
}

在第一次更改時將數組轉換為單個 object，然后在第二次更改時刪除所有其他屬性。

Answer 1

你可以做這樣的事情

onChange={e =>
  setServerRequests(oldValue => {
    // first spread value
    oldValue[selectedServer] = {
      ...oldValue[selectedServer],
      ID: e.target.value
    }

    // and now spread and return array
    return [...oldValue]
  })
}

Answer 2

onChange={e =>
  setServerRequests({
    ...serverRequests[selectedServer],
    ID: e.target.value
  })
}

這意味着“使用此 ID 設置serverRequests ，並在其中傳播serverRequests[selectedServer] ”。 所以是的，它變成了一個 object。 為避免這種情況，您需要在之前傳播您以前的 state：

setServerRequests({...serverRequests, otherChange: otherValue}) 。

現在，如果您需要從serverRequests更改一個 object ，您需要創建它的副本，編輯您要更改的 object ，然后將其傳播到您的setServerRequests中。 就像是：

onchange = () => {
 const state = Object.assign({}, serverRequests); // or lodash clonedeep
 const objIndexToEdit = // get index of the item you want to changes
 state[objIndexToEdit] = // your changed obj (do it as you wish, just giving an example)
 setServerRequests({...state});
}