如何仅更改包含对象的 React useState 中的一个值并将其他值分配给其他值？

Question

我有以下状态：

const [clickColumn, setClickColumn] = useState({
    name: 0,
    tasks: 0,
    partner: 0,
    riskFactor: 0,
    legalForm: 0,
    foundationYear: 0
  })

现在，例如，我只想将 name 设置为 2，其余设置为 1。但我不想这样写： setClickColumn({ name: 2, tasks: 1, riskFactor: 1, partner: 1, legalForm: 1, foundationYear: 1 });

我怎样才能让它更短？

Answer 1

您可以使用扩展运算符使其变得简单：

setClickColumn({ ...clickColumn, name: 2 });

它传播现有对象 clickColumn 并添加名称：2，覆盖默认值。 https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/Spread_syntax

Answer 2

缩短它并不一定会使它更简单，但您可以执行以下操作：

 const obj = { name: 0, tasks: 0, partner: 0, riskFactor: 0, legalForm: 0, foundationYear: 0 }; const entries = Object.entries(obj).map(([key, value]) => key === 'name' ? [key, 2] : [key, 1]); const result = Object.fromEntries(entries); console.log(result);

Answer 3

您可以轻松创建一个函数，通过解析对象并给出正确的值来为您重置状态：

 const getResetClickColumn = (clickColumn) => { Object.keys(clickColumn).forEach(key => { const value = (key === 'name' ? 2 : 1); clickColumn[key] = value; }) return clickColumn; } const reset = getResetClickColumn({ name: 0, tasks: 0, partner: 0, riskFactor: 0, legalForm: 0, foundationYear: 0 }) console.log(reset)

Answer 4

除了@MorKadosh 的回答：

setClickColumn(Object.fromEntries(Object.entries(clickColumn)
   .map(([key, value]) => [key, key === 'name' ? 2 : 1])))

Answer 5

您可以简单地制作一个临时变量

let tmpColumn = clickColumn;
tmpColumn.name = 2;
// other changes
setClickColumn(tmpColumn);