材质 ui 单选按钮选择 reactjs 中的上一个按钮值

Question

我已经添加了单选按钮组到mareferjs应用程序，这里的问题是当我尝试记录值时，我得到前一个单选按钮的值，而不是获取当前按钮的值。例如。假设当我点击从然后这个日志。我不知道是什么导致了这个问题。allawaitedall

我的代码

 const [radioValue, setRadioValue] = React.useState("all");

function handleChangeRadio(event) {

    const value = event.target.value;

    setRadioValue(value);

    console.log(radioValue);             <---- Here When i try to log the value. it shows the value of previous button.

  }

<RadioGroup

              className={classes.radioGroup}

              aria-label="status"

              name="status"

              value={radioValue}

              onChange={handleChangeRadio}

              row

            >

              <FormControlLabel

                checked={radioValue === "all"}

                value="all"

                control={<Radio color="primary" />}

                label="All"

                labelPlacement="end"

                className={classes.radioLabel}

              />

              <FormControlLabel

                checked={radioValue === "approved"}

                value="approved"

                control={<Radio color="primary" />}

                label="Approved"

                labelPlacement="end"

                className={classes.radioLabel}

              />

              <FormControlLabel

                checked={radioValue === "awaited"}

                value="awaited"

                control={<Radio color="primary" />}

                label="Awaited"

                labelPlacement="end"

                className={classes.radioLabel}

              />

              <FormControlLabel

                checked={radioValue === "on_hold"}

                value="on_hold"

                control={<Radio color="primary" />}

                label="On Hold"

                labelPlacement="end"

                className={classes.radioLabel}

              />

            </RadioGroup>

Answer 1

使用 useState 挂钩提供的更新程序的状态更新是异步的，不会立即反映。尝试使用钩子读取值：useEffect()useEffect(() => {&nbsp; console.log(radioValue)}, [radioValue])

Answer 2

您需要知道：setState操作是异步的，并且为提高性能而进行批处理。这在设置状态的文档中有解释。但是为什么？ 改变状态并导致重新呈现。这可能是一项代价高昂的操作，使其同步可能会使浏览器无响应setState因此，setState 调用是异步的，并且是批处理的，以获得更好的 UI 体验和性能。如果我需要在之后做些什么怎么办？setState如果你有一个，你可以做你需要的里面，像这样：React Class ComponentsetState callbackthis.setState(newState, function(){&nbsp; &nbsp;// Do what it needs to be done after updating newState here});如果你有一个你需要用钩子听，并做你需要的事情，像这样：React Functional Componentstate changeuseEffectuseEffectuseEffect(() => {&nbsp; // Do what it needs to be done after updating state here}, [radioValue])