React数组类型state的setter无法实现push效果且类型变为string怎么解决

问题根源 #

你在循环中直接调用setDepartmentNames时传入的是字符串类型的departments[key].name，直接覆盖了初始的数组类型state，因此typeof输出才会是string。另外React的状态更新是批量异步的，循环内多次调用同个state的setter也不会按预期逐次更新，只会生效最后一次赋值。

正确实现数组追加的两种方案 #

方案1：批量一次性更新所有元素（推荐，性能更好） #

你当前遍历全量departments的场景，适合先组装好完整数组再一次性更新state，不需要循环调用setter：

const [departmentNames, setDepartmentNames] = React.useState([]);

// 先遍历组装目标数组
const newDepartmentNames = Object.keys(departments).map(key => departments[key].name);
// 一次性更新state
setDepartmentNames(newDepartmentNames);

// 验证数组类型不要用typeof，数组属于引用类型typeof固定返回object，用如下方法验证
console.log(Array.isArray(departmentNames)); // 输出true

方案2：单次追加单个元素（实现类似push的效果） #

如果是触发单个元素追加的场景，用setter的函数式更新写法，基于最新的旧state生成新数组再赋值：

// 要追加的单个部门名
const newDeptName = "销售部";
// 函数式更新拿到最新的旧state快照，展开后拼接新元素生成新数组
setDepartmentNames(prevState => [...prevState, newDeptName]);

注意事项 #

• 不要直接修改原state数组：departmentNames.push(xxx)这类直接修改原state的写法是错误的，React无法监听到原state的变化，不会触发重渲染。
• 数组类型校验不要用typeof：typeof []的固定输出为object，要使用Array.isArray()方法判断是否为数组。

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