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