React中useState状态更新：命令式代码优化为简洁函数式写法及类型错误解决

嘿，我懂你想要那种清爽的一行式写法的需求——咱们直接把它改对，还顺便优化一下原写法里的小问题！

首先，你选项2的核心问题是：三元表达式返回的是单个布尔值（endpoint.autoGenerate或者赋值后的false），所以map最终生成了boolean[]，和useState期望的ISlugSegment[]类型不匹配。而且你原来的写法1其实还有个隐藏问题：直接修改了原state里的endpoint对象（因为数组里的对象是引用类型），这违反了React状态不可变的原则，可能导致组件无法正确触发重渲染。

正确的简洁一行写法 #

我们需要保证map返回的是完整的ISlugSegment对象，而不是单个属性值。用对象展开语法就能轻松实现：

_setEndpoints(_endpoints.map((endpoint: ISlugSegment) => 
  endpoint.localeKey === _selectedLocale 
    ? { ...endpoint, autoGenerate: false } 
    : endpoint
));

为什么这个写法正确？ #

• 当条件匹配时，我们通过{ ...endpoint, autoGenerate: false }创建一个新的对象：复制原endpoint的所有属性，再覆盖autoGenerate为false，完全保留了对象的类型。
• 条件不匹配时直接返回原对象，避免不必要的对象创建。
• 整个map的结果还是ISlugSegment[]，完美符合setEndpoints的参数类型要求，同时遵守了React状态不可变的规则。

另一种可选写法（用Object.assign） #

如果你更习惯用Object.assign，也可以写成这样：

_setEndpoints(_endpoints.map((endpoint: ISlugSegment) => 
  endpoint.localeKey === _selectedLocale 
    ? Object.assign({}, endpoint, { autoGenerate: false }) 
    : endpoint
));

两种写法效果一致，对象展开的语法更直观简洁，推荐优先使用。

内容的提问来源于stack exchange，提问作者San Jay Falcon