单选按钮onclick，它在console.log上显示，带有React Hooks的先前按钮值

问题描述

我有4个单选按钮输入，单击任何一个按钮后console.log不会显示所选/当前按钮的值，而单击下一个单选按钮，console.log将显示前一个按钮的值，依此类推...尽管在表单提交中，但它会提交正确的值。有人可以帮忙吗？我的组件在下面的React中表示感谢

import React,{ useState } from 'react'
import RadioButton from './RadioButton'

const StepTwo = props => {

const [selected,setSelected] = useState({})

const handleOnChange = e => {
    setSelected({ selected: e.target.value })
    console.log(selected)
}

const handleFormSubmit = e => {
    e.preventDefault();
    setSelected({ selected: e.target.value })
    console.log("You have submitted:",selected);
    props.history.push("./step-three");
}

return (
    <>
        <form onSubmit={handleFormSubmit}>
            <div className="radioGroup">
                <RadioButton
                    changed={handleOnChange}
                    id="op1"
                    isSelected={selected === "Smaller than average"}
                    label="Smaller than average"
                    value="Smaller than average"
                    name="diet"
                />
                <RadioButton
                    changed={handleOnChange}
                    id="op2"
                    isSelected={selected === "Average"}
                    label="Average"
                    value="Average"
                    name="diet"
                />
                <RadioButton
                    changed={handleOnChange}
                    id="op3"
                    isSelected={selected === "Larger than average"}
                    label="Larger than average"
                    value="Larger than average"
                    name="diet"
                />
                <RadioButton
                    changed={handleOnChange}
                    id="op4"
                    isSelected={selected === "Not at all"}
                    label="Not at all"
                    value="Not at all"
                    name="diet"
                />
                <button className="btnComponent" type="submit">Next question</button>
            </div>
        </form>
    </>
)
}
export default StepTwo

还有我的收音机 按钮组件在这里

const RadioButton = props => {

return (
    
    <div className="radioGroup">
        <input
            id={props.id}
            onChange={props.changed}
            value={props.value}
            type="radio"
            name={props.name}
          
        />
        <label
            htmlFor={props.id}
            id={props.id}>
            <span>{props.label}</span>
        </label>
    </div>
);
}

export default RadioButton;

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）