React中如何动态修改State对象已有属性而非新增键？

你的问题出在toggleMenu函数的对象赋值写法上——直接写menuItem: !people[menuItem]时，JavaScript会把menuItem当作字面量键名，而不是你传入的变量对应的键，所以才会新增一个menuItem属性。

要解决这个问题，需要使用计算属性名（把变量放在方括号[]里），这样就能动态对应到传入的键：

const toggleMenu = (menuItem: keyof typeof people) => {
  setPeople({ ...people, [menuItem]: !people[menuItem] });
};

修复后，当你传入"company"时，方括号会解析变量值作为键，就会正确修改company属性的布尔值，而不会新增多余键。

完整修复后的代码：

import "./styles.css";
import { useEffect, useState } from "react";

export default function App() {
  interface filter {
    company: boolean;
    gender: boolean;
  }
  const [people, setPeople] = useState<filter>({
    company: false,
    gender: false,
  });

  useEffect(() => {
    console.log(people);
  }, [people]);


  const toggleMenu = (menuItem: keyof typeof people) => {
    setPeople({ ...people, [menuItem]: !people[menuItem] });
  };


  return (
    <div className="App">
      <button
        className="flex flex-row justify-center w-full"
        onClick={() => toggleMenu("company")}
      >
        Click me 
      </button>
    </div>
  );
}

内容的提问来源于stack exchange，提问作者Random Data Monster