React中如何用变量作为对象键调用setState更新过滤器状态？

问题核心是你直接将val写在对象字面量里当键名时，JavaScript会把它识别成字符串"val"而非变量对应的实际值。要解决这个问题，只需使用ES6对象属性的方括号表示法，把变量包裹在方括号中，这样它就会被解析为变量的实际值。

修改你的onChange回调代码即可：

onChange={(event) =>
  props.setFilters({ 
    ...props.filters, 
    [val]: event.target.value // 用方括号包裹val，解析为变量对应的值
  })
}

额外优化建议 #

不要用index作为select组件的key，如果types的键顺序发生变化，可能导致React渲染异常。直接用val作为key更稳定，因为每个val都是唯一的：

<select
  name={val}
  key={val} // 替换index为val作为key
  onChange={(event) =>
    props.setFilters({ ...props.filters, [val]: event.target.value })
  }
>

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