React-JavaScript变量作用域问题：问卷组件中applicableCriteria无法更新

你的问题核心不是JavaScript作用域问题，而是没有遵循React的状态管理规则：用普通var变量存储的applicableCriteria会在组件每次渲染时被重新初始化，修改它也不会触发组件更新；同时状态更新的异步性也导致你拿到的checkbox状态是旧值。以下是具体解决方案：

1. 改用React useState管理applicableCriteria #

React组件中需要持久化且触发更新的数据必须用状态管理，把普通变量替换为useState：

// 用flatMap简化初始化逻辑，替代嵌套循环
const initialApplicableCriteria = Records.flatMap(record => record.criterion);
const [applicableCriteria, setApplicableCriteria] = React.useState(initialApplicableCriteria);

2. 修复handleChange中的异步状态问题 #

setChecked是异步操作，直接在handleChange中使用checked0等变量会拿到旧值，需要先计算新状态，再传递给处理函数：

const handleChange0 = () => {
  const newChecked = !checked0;
  setChecked0(newChecked);
  // 使用函数式更新确保拿到最新的applicableCriteria状态
  setApplicableCriteria(prevList => arrayHandler(0, newChecked, prevList));
};

3. 改造arrayHandler为纯函数 #

避免直接修改原数组（splice、push都是可变操作），返回新数组符合React不可变状态原则，同时避免作用域混淆：

function arrayHandler(id, decision, criterionList) {
  const decisionSignal = decision ? "No" : "Yes";
  const criteriaOfInterest = Records[id].criterion;
  const targetDecision = Records[id].decision;

  if (decisionSignal === targetDecision) {
    // 过滤移除指定条件，返回新数组
    return criterionList.filter(c => !criteriaOfInterest.includes(c));
  } else {
    // 合并新条件并去重，返回新数组
    const uniqueCriteria = new Set(criterionList);
    criteriaOfInterest.forEach(c => uniqueCriteria.add(c));
    return Array.from(uniqueCriteria);
  }
}

4. 可选：简化重复的Checkbox状态管理 #

把多个checked0-checked3合并为一个数组状态，减少重复代码：

// 初始化对应Records长度的布尔数组
const [checkedStates, setCheckedStates] = React.useState(Array(Records.length).fill(false));

const handleChange = (index) => {
  const newChecked = !checkedStates[index];
  // 更新checkbox状态
  setCheckedStates(prev => {
    const newStates = [...prev];
    newStates[index] = newChecked;
    return newStates;
  });
  // 更新适用条件
  setApplicableCriteria(prevList => arrayHandler(index, newChecked, prevList));
};

渲染时循环生成Checkbox：

{Records.map((record, index) => (
  <div key={index}>
    <Checkbox
      label={record.question}
      value={checkedStates[index]}
      onChange={() => handleChange(index)}
    />
    <br /><br />
  </div>
))}

完整修改后代码 #

const QuestionnaireForm = () => {
  // 初始化适用条件状态
  const initialApplicableCriteria = Records.flatMap(record => record.criterion);
  const [applicableCriteria, setApplicableCriteria] = React.useState(initialApplicableCriteria);

  const data = useRef();
  const handleClick = () => {
    console.log(data.current.value, "initialvalue");
    localStorage.setItem("inputValue", data.current.value);
  };

  const [name, setName] = useLocalStorage("name", "");

  // 纯函数：处理条件数组的增删，返回新数组
  function arrayHandler(id, decision, criterionList) {
    const decisionSignal = decision ? "No" : "Yes";
    const criteriaOfInterest = Records[id].criterion;
    const targetDecision = Records[id].decision;

    if (decisionSignal === targetDecision) {
      return criterionList.filter(c => !criteriaOfInterest.includes(c));
    } else {
      const uniqueCriteria = new Set(criterionList);
      criteriaOfInterest.forEach(c => uniqueCriteria.add(c));
      return Array.from(uniqueCriteria);
    }
  }

  // 合并所有checkbox状态为一个数组
  const [checkedStates, setCheckedStates] = React.useState(Array(Records.length).fill(false));

  const handleChange = (index) => {
    const newChecked = !checkedStates[index];
    setCheckedStates(prev => {
      const newStates = [...prev];
      newStates[index] = newChecked;
      return newStates;
    });
    setApplicableCriteria(prevList => arrayHandler(index, newChecked, prevList));
  };

  function handleSubmit(event) {
    console.log("Submitted");
    console.log("Final applicable criteria:", applicableCriteria);
    event.preventDefault();
  }

  return (
    <div className="App__form">
      <h1> Questionnaire </h1>

      <form onSubmit={handleSubmit}>
        {Records.map((record, index) => (
          <div key={index}>
            <Checkbox
              label={record.question}
              value={checkedStates[index]}
              onChange={() => handleChange(index)}
            />
            <br /><br />
          </div>
        ))}
        <input type="submit" value="Submit"></input>
      </form>
    </div>
  );
};

// Checkbox Component
const Checkbox = ({ label, value, onChange }) => {
  return (
    <label>
      <input type="checkbox" checked={value} onChange={onChange} />
      {label}
    </label>
  );
};

export default QuestionnaireForm;

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