Reactjs 单选按钮未正确检查

Question

我正在尝试构建一个过滤器，根据经验过滤所有候选人。我已经使用单选按钮构建了过滤器，该按钮发送工作正常，但问题是它没有被检查。默认情况下，我希望当用户单击一个 btn 时不检查每个单选按钮，然后应该检查它。当我单击 btn 时，它会过滤候选者，但单选按钮本身不会被检查。我的组件很大，这就是为什么我只提供你们都需要的代码。请帮助我正确设置单选按钮的检查。谢谢

        //i'm importing this array and using it in my component
export const filtersByExp = [
  {
    value: 0,
    label: "Fresher",
  },
  {
    value: 1,
    label: "1 year above ",
  },
  {
    value: 2,
    label: "2 year above ",
  },
  {
    value: 3,
    label: "3 year above  ",
  },
  {
    value: 4,
    label: "4 year above  ",
  },
  {
    value: 5,
    label: "5 year above  ",
  },
];

      //component
  const [filter, setFilter] = useState({
    stage: "all",
    exp: null,
    job_id: null,
  });
 const handleRadioChange = ({ target }) => {
            let value = target.value;
            let name = target.name;
            setFilter({
              ...filter,
              [name]: value,
            });
          };
        
    //jsx
        {[...filtersByExp].map((item) => (
                        <div key={item.value} className="mb-2">
                          <Form.Check
                            type="radio"
                            label={item.label}
                            name="exp"
                            checked={filter.exp === item.value}
                            onChange={handleRadioChange}
                            value={item.value}
                          />
                        </div>
                      ))}

Answer 1

必须defaultChecked在jsx中使用。因为如果使用checked，最终值永远不会改变，但 defaultChecked 仅在反应中的初始渲染中加载。

<div key={item.value} className="mb-2">
    <Form.Check
        type="radio"
        label={item.label}
        name="exp"
        defaultChecked={filter.exp === item.value}
        onChange={handleRadioChange}
        value={item.value}
    />
</div>