如何在 React 上使用带有 useState 的单选按钮？答案

【问题标题】：How to use radio button on React with useState?如何在 React 上使用带有 useState 的单选按钮？
【发布时间】：2020-10-23 14:33:30
【问题描述】：

我被这个困住了！

我在 Stack Overflow 上找到了以下代码： How to use radio buttons in ReactJS?

我对箭头函数的使用做了一些改进：

const App = () => {

    const [values, setValues] = useState({
        gender: '',
    });
  
    const setGender = (event) => {
        console.log(event.target.value);
        setValues({ ...values, gender: event.target.value });
        console.log(values);
    };
  
  render() {
    return ( 
      <div onChange={setGender}>
        <input type="radio" value="MALE" name="gender"/> Male
        <input type="radio" value="FEMALE" name="gender"/> Female
      </div>
     )
  }
}

export default App;

我选择第一个收音机和“MASCULINE” 第一个Consolo.log的结果是“MASCULINE”

-但是，第二个 console.log 显示“gender: ''”

当我选择第二个收音机时，没有刷新它显示的页面：

-第一个Consolo.log的结果是“FEMALE”，第二个consolo.log的结果是“gender: 'MASCULINE'”

如果我再次切换到第一个： -它在第一个中显示“MASCULINE”，在第二个中显示“FEMALE”......

仿佛落后一步的状态

如何在“实时”中更新状态？

【问题讨论】：

标签： reactjs radio-button dom-events use-state

【解决方案1】：

这里的问题是为什么您希望状态“实时”更新？您打算如何处理结果？

setState 在 React 中是异步的，因为它可以提高性能。如果您想知道状态变量何时更新以执行操作（渲染除外，因为 react 会处理该操作），您可以使用钩子 useEffect

useEffect(() => {
  // here, values has already been updated
}, [values]) //<- your dependency array, in this case values

【讨论】：

【解决方案2】：

这是预期的行为。 React 在你的函数完成后触发更新，所以在里面你将看不到更新的值

您可以将控制台日志移出该功能，一旦您执行 setValues，它就会触发。

如果您需要“实时”获取值，则需要使用 ref（请参阅 useRef）。

我为你做了一个演示，这样更容易理解。看看here

【讨论】：