javascript - 为什么此数组中的值（显然）立即更改(Why the value in this array (apparently) changes immediately)

Question

I couldn't find any similar question, I don't know what could be happening there, (and maybe could be something stupid) but I haven't found any clue about what could be happening.(我找不到任何类似的问题，我不知道在那里可能会发生什么（也许可能是愚蠢的事情），但我没有发现任何可能发生的线索。)

I have this array:(我有这个数组：)

const superVillains = [
  { value: '1', label: 'Thanos' },
  { value: '2', label: 'The Joker' },
  { value: '3', label: 'Ultron', disabled: true },
  { value: '4', label: 'The Riddler' },
  { value: '5', label: 'Lex Luthor' },
  { value: '6', label: 'Green Goblin' },
  { value: '7', label: 'Bain', disabled: true },
  { value: '8', label: 'The Penguin' },
  { value: '9', label: 'Doctor Octopus' },
  { value: '10', label: 'Poison Ivy' },
  { value: '11', label: 'Magneto' },
  { value: '12', label: 'Mr. Glass' },
  { value: '13', label: 'General Zod' },
  { value: '14', label: 'Red Skull', disabled: true },
  { value: '15', label: 'Baron Von Zemo' }
];

I copied this array into another called optionsState in a react state(我将此数组复制到一个处于反应状态的名为optionsState数组中)

const [optionsState, setOptionsState] = useState(superVillains);

and applied the following operations:(并应用了以下操作：)

const index = 0; 
optionsState[index]['selected'] = true; 
console.log(optionsState[index]['selected']);
console.log(optionsState[index]);
console.log(optionsState);

This is the result in console:(这是控制台中的结果：)

In the first console output it seems that the selected value is true as it should, the same for the second console output, but without changing nothing in the code the third console output shows that the selected value is false.(在第一个控制台输出中，似乎所选值正确，与第二个控制台输出相同，但是在未更改代码的情况下，第三个控制台输出显示所选值为false。)

the question is: Why does the selected value apparently changes without applying any operations on it (besides a console log statement)?(问题是：为什么selected值在没有应用任何操作的情况下显然会发生变化（除了控制台日志语句）？)

If a place another(如果另一个地方)

console.log(optionsState[index]);

after the last console log it will show the same as before:(在最后一个控制台日志之后，它将显示与以前相同的内容：)

{value: "1", label: "Thanos", selected: true}

so I don't know if it is an issue with the browser or an issue with the react states or an issue with me.(所以我不知道这是浏览器问题还是反应状态问题还是我的问题。)

Any ideas on this?(有什么想法吗？)

  ask by Fabian Merchan translate from so

Answer 1

Now that you edited your question, I get it :)(现在您已经编辑了问题，我明白了:))

You are mutating your state, and react is based in immutability (google for more), a quick fix would be :(您正在改变状态，而反应是基于不变性 （Google表示更多信息），一个快速的解决方法是：)

setOptionsState(prevState => {
  const oldOptions = [...prevState.optionsState];
  oldOptions[index] = { ...oldOptions[index] , selected: true };
  return { oldOptions };
})