Question

我坚持下去！

我有以下代码在堆栈溢出中找到： 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”，第二个console.log的结果为“ gender: 'MASCULINE'”

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

假设状态为一步

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

Answer 1

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

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

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

Answer 2

这是预期的行为。函数完成后，React会触发更新，因此在其中，您将无法看到更新的值

您只需将控制台日志移出该功能，执行setValues就会触发。

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

我为您制作了一个演示，使它更易于理解。签出here

如何使用useState在React上使用单选按钮？

2 个答案: