React中如何修改state值？开关状态同步表单字段问题求助

我来帮你解决这个const赋值和表单状态更新的问题，先梳理下你代码里的几个关键问题，再给出修复方案：

代码里的核心问题 #

1. 块级作用域导致value未定义：你在if/else块内声明了const value，但这个变量只在各自的代码块里有效，外面的console.log和setEquipRevisao用到的value其实是未定义的，这就是状态修改不生效的核心原因。
2. setCheckedA使用错误：你的checkedA初始是布尔值，但你用setCheckedA({ [nameChecked]: event.target.checked })把它改成了对象类型，后续状态会彻底混乱，应该直接更新布尔值。
3. Switch组件的checked属性绑定错误：你绑定了props.checkedA，但App组件并没有接收这个props，应该用组件内部的checkedA状态。

修复后的完整代码 #

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import Switch from "@material-ui/core/Switch";
import "./styles.css";

function App(props) {
  const initialFormState = {
    datRev: "01/05/2019",
    empRev: "1",
    numCad: "5",
    numEmp: "1",
    obsRev: "ReactJS done!",
    sitRev: "1",
    tipCol: "1",
    tipEqp: "10",
    tipSvc: "100",
    cheklist: { "": "", "": "", "": "", "": "" },
    codCkl: "4",
    sitCkl: "N",
    selPro: "S",
    obsCkl: "obs insomina"
  };
  const [equipRev, setEquipRevisao] = useState(initialFormState);
  const [checkedA, setCheckedA] = useState(false);

  // 监听equipRev变化，查看更新后的sitCkl值
  useEffect(() => {
    console.log("sitCkl (更新后): " + equipRev.sitCkl);
  }, [equipRev]);

  const handleChange = nameChecked => event => {
    const { name } = event.target;
    const isChecked = event.target.checked;
    
    // 修正checkedA的更新：直接设置布尔值
    setCheckedA(isChecked);

    // 用三元表达式赋值，避免块级作用域问题
    const value = isChecked ? "S" : "N";
    
    console.log("Value: " + value);
    // 更新表单状态，展开当前状态并修改指定字段
    setEquipRevisao({ ...equipRev, [name]: value });
    // 注意：setState是异步的，这里打印的是更新前的旧值
    console.log("sitCkl (旧值): " + equipRev.sitCkl);
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <Switch
        name="sitCkl"
        // 修正checked属性绑定，使用组件内部状态
        checked={checkedA}
        onChange={handleChange("checkedA")}
        value={equipRev.sitCkl}
      />
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

额外说明 #

• 关于const的使用：const声明的变量不能重新赋值，但你可以在合适的作用域（比如函数顶部）声明它，或者用三元表达式这种简洁方式赋值，避免块级作用域导致的变量不可访问问题。
• React的setState是异步操作，调用后立即打印状态会得到旧值。如果需要查看更新后的状态，可以用useEffect监听状态变化，就像代码里添加的那样。

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