useState无法读取if语句外的list变量，如何避免重复编写状态更新代码

• 块级作用域限制：const 声明的变量仅在当前{}包裹的代码块内有效，你在if(chck)和else两个子分支块内定义的list变量，出了分支块就会被销毁，外层自然无法访问，因此抛出未定义错误。
• 隐藏的状态突变问题：原代码中使用splice方法直接修改state里的machinetype原数组，违反了React状态不可变的原则，可能会导致后续状态更新不触发、渲染异常等问题。

const [data, setData] = useState({
  name: "",
  email: "",
  machinetype: [],
});

const handleInputChange = (event) => {
  if (event.target.name === "machinetype") {
    const chck = event.target.checked;
    const currentTypeList = data[event.target.name];
    // 提前在分支外层声明list变量，所有子分支都可以赋值
    let list;
    if (chck) {
      list = currentTypeList.concat([event.target.value]);
    } else {
      const index = currentTypeList.indexOf(event.target.value);
      // 先浅拷贝原数组，再修改拷贝后的数组，避免直接修改原state
      const newTypeList = [...currentTypeList];
      newTypeList.splice(index, 1);
      list = newTypeList;
    }
    setData({
      ...data,
      [event.target.name]: list,
    });
  }
};

• 提前在if(chck)分支的外层用let声明list变量，两个子分支分别对list赋值即可，外层setData可以正常访问该变量，消除了重复的setData逻辑。
• 移除了直接修改原状态的splice操作，改为先浅拷贝原数组再修改拷贝值，符合React状态更新的规范，避免潜在bug。

内容的提问来源于stack exchange，提问作者Josué Venegas