材质 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(() => {

  console.log(radioValue)

}, [radioValue])

Answer 2

您需要知道：

setState操作是异步的，并且为提高性能而进行批处理。这在设置状态的文档中有解释。

但是为什么？ 改变状态并导致重新呈现。这可能是一项代价高昂的操作，使其同步可能会使浏览器无响应setState

因此，setState 调用是异步的，并且是批处理的，以获得更好的 UI 体验和性能。

如果我需要在之后做些什么怎么办？setState

如果你有一个，你可以做你需要的里面，像这样：React Class ComponentsetState callback

this.setState(newState, function(){

   // Do what it needs to be done after updating newState here

});

如果你有一个你需要用钩子听，并做你需要的事情，像这样：React Functional Componentstate changeuseEffectuseEffect

useEffect(() => {

  // Do what it needs to be done after updating state here

}, [radioValue])