Question

使用解构，我可以使用一个函数更新多个对象属性：

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

但是，我想在对象数组上执行此操作。我该怎么办？

使用

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

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

将在第一次更改时将数组转换为单个对象，然后在第二次更改时删除所有其他属性。

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]”。因此，是的，它成为一个对象。为了避免这种情况，您需要在以下情况之前散布以前的状态：

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

现在，如果您需要从serverRequests中更改一个对象，则需要创建它的副本，编辑要更改的对象，然后将其传播到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});
}

UseState更新对象数组中的多个属性

2 个答案: