使用 useEffect() 反应无线电输入类型和 defaultChecked 行为

Question

我有一种情况，我想设置无线电组的默认值作为延迟呼叫的副作用。但是，状态更新时默认值属性似乎被忽略，我不明白为什么。这是一个简单的例子，我运行过它https://playcode.io/react:

import React from 'react';

export function App(props) {
  const [defaultValue, setDefaultValue] = React.useState(1);

  React.useEffect(() => {
    setDefaultValue(2);
  });

  console.log(defaultValue);

  return (
    <div className='App'>
      <input type="radio" name="whatever" value="0" defaultChecked={defaultValue === 0}></input>Value 0
      <input type="radio" name="whatever" value="1" defaultChecked={defaultValue === 1}></input>Value 1
      <input type="radio" name="whatever" value="2" defaultChecked={defaultValue === 2}></input>Value 2
    </div>
  );
}

如您所见，默认值的初始状态是 1，一旦 useEffect() 发生，默认值就会更改为 2。

我确实设法通过设置“checked”属性并放入 onChange 处理程序来存储值来解决此问题，但我真的很好奇为什么 defaultChecked 在状态更改时不起作用。

Answer 1

如果您希望defaultValue状态确定所选单选按钮并对状态更新做出反应，则需要使用checked属性而不是defaultChecked。以下是调整代码的方法：

import React from 'react';

export function App(props) {
  const [defaultValue, setDefaultValue] = React.useState(1);

  React.useEffect(() => {
    setDefaultValue(2); // Update defaultValue after mount
  }, []);

  console.log(defaultValue);

  return (
    <div className='App'>
      <input
        type="radio"
        name="whatever"
        value="0"
        checked={defaultValue === 0}
        onChange={() => setDefaultValue(0)}
      />Value 0
      <input
        type="radio"
        name="whatever"
        value="1"
        checked={defaultValue === 1}
        onChange={() => setDefaultValue(1)}
      />Value 1
      <input
        type="radio"
        name="whatever"
        value="2"
        checked={defaultValue === 2}
        onChange={() => setDefaultValue(2)}
      />Value 2
    </div>
  );
}