如何在handleSubmit中将filter对象对应字段设为true？

你的代码里有几个关键问题导致无法正确更新filter：

1. 箭头函数未执行：你在if判断里定义了箭头函数但没有调用，根本不会触发setFilter。
2. 动态对象键语法错误：设置动态键名必须用[x]: true的语法，直接写x只会把字符串"x"作为键名，而非变量x的值。
3. var变量作用域问题：用var声明的x存在变量提升，循环结束后x会变成最后一个键，导致更新逻辑出错，换成let/const更安全。
4. trueItems的name存在空格：你的trueItems里name是" pescatarian"（开头有空格），但filter里的键是"pescatarian"，两者不相等，导致判断条件x === items.name永远不成立，这是隐藏的匹配失败问题。
5. 多次异步更新的风险：循环里多次调用setFilter，直接展开filter可能拿到旧状态，用函数式更新或一次性构建新对象更可靠。

修正后的代码 #

方案一：循环构建新对象后一次性更新 #

function handleSubmit() {
  // 先清理trueItems中name的前后空格，确保和filter键名匹配
  const cleanedTrueItems = trueItems.map(item => ({
    ...item,
    name: item.name.trim()
  }));

  // 基于当前filter构建新对象，避免多次触发状态更新
  const newFilter = {...filter};
  for (const item of cleanedTrueItems) {
    const key = item.name;
    // 只更新filter中存在的键
    if (newFilter.hasOwnProperty(key)) {
      newFilter[key] = true;
    }
  }
  setFilter(newFilter);
}

方案二：用reduce简化逻辑 #

function handleSubmit() {
  const newFilter = trueItems.reduce((acc, item) => {
    const key = item.name.trim();
    return {
      ...acc,
      [key]: true
    };
  }, {...filter});
  
  setFilter(newFilter);
}

关键修改说明 #

• 清理name空格：用trim()去掉trueItems中name的前后空白字符，保证和filter的键名完全匹配。
• 一次性更新状态：先构建完整的新filter对象再调用setFilter，既提升性能，也避免异步状态更新带来的旧值覆盖问题。
• 动态键正确语法：通过[key]: true的语法，确保变量key的值作为对象的键名，实现动态赋值。

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