React中如何根据输入值正确更新状态对象中指定字母的属性值为true

嘿，你的代码其实已经完美实现需求啦！让我给你拆解下它的工作逻辑，以及怎么更好地验证效果：

现有代码的核心逻辑 #

• 你用useState初始化了状态letters，是一个包含A、B、C三个布尔属性的对象，初始值全为false。
• handleClick函数是关键：它接收一个input参数，调用setLetters时用了函数式更新——这是React里基于旧状态更新新状态的最佳实践，能确保你拿到的prevLetters是最新的状态快照。
• 里面的{ ...prevLetters, [input]: true }做了两件事：
  1. 用扩展运算符...复制旧状态的所有属性，保证不会直接修改原状态（符合React状态不可变的规则）。
  2. 用计算属性名[input]，把传入的对应属性精准设置为true，其他属性保持原有值不变。
• 当你调用handleClick("A")时，letters就会变成{ A: true, B: false, C: false }，完全符合你的需求。

验证效果的完整示例 #

如果你想在组件里直观看到效果，可以把代码扩展成这样：

import { useState } from 'react';

export default function LetterToggle() {
  const [letters, setLetters] = useState({ A: false, B: false, C: false });

  function handleClick(input){
    setLetters((prevLetters) => ({ ...prevLetters, [input]: true }));
  }

  return (
    <div>
      <button onClick={() => handleClick("A")}>把A设为true</button>
      <button onClick={() => handleClick("B")}>把B设为true</button>
      <button onClick={() => handleClick("C")}>把C设为true</button>
      <p>当前状态: {JSON.stringify(letters)}</p>
    </div>
  );
}

点击对应的按钮，就能实时看到letters对象里的对应属性变成true啦。

小提醒 #

• 要确保传入的input值和letters的属性名完全匹配（比如这里是大写的A/B/C，别传小写的a哦）。
• 函数式更新在这里是更安全的写法，尤其是当你的更新逻辑依赖旧状态，或者存在连续更新的场景时，它能避免状态不一致的问题。

内容的提问来源于stack exchange，提问作者Leon