状态变化呈现先前状态 React

Question

我正在尝试更改组件的状态，但它一直呈现以前的状态。

据我了解，组件是在保存状态之前渲染的，我需要使用回调函数，但我没有成功。

这是我正在尝试做的事情的简化代码：

export default function ColorPick() {

  const [color, setColor] = useState('');
  const [choice, setChoice] = useState('blue');

   const handleColor = (event, newChoice) => {
    setChoice(newChoice)
    if(choice === 'blue'){
      setColor('blue')
    }else{
      setColor('red') 
    }
  };

  return (
    <select onChange={handleColor} value={choice}>
     <option value="red">Red</option>
     <option value="blue">Blue</option>
    </select>
    <h1>{color}</h1>
  );
}

谢谢

Answer 1

useState 是异步的，所以你不能在 handleColor 函数中访问新的 choice 值，此外 yan 不能在你的函数中访问 newChoice 因为你没有传递任何参数，您的 handleColor 函数仅接收事件作为回调参数。在你的情况下，你可以摆脱 choice 和 setChoice 这样的

const {useState} = React

function ColorPick() {

const [color, setColor] = useState('blue');

const handleColor = (event) => {
  setColor(event.target.value)
};

return (
  <>
  <select onChange={handleColor} value={color}>
    <option value="red">Red</option>
    <option value="blue">Blue</option>
  </select>
  <h1>{color}</h1>
  </>
);

}

const root = ReactDOM.createRoot(document.getElementById("root"));
      root.render(
        <>
          <ColorPick />
        </>
      );

<script src="https://unpkg.com/@babel/standalone/babel.min.js"></script>
    <script
      crossorigin
      src="https://unpkg.com/react@18/umd/react.production.min.js"
    ></script>
    <script
      crossorigin
      src="https://unpkg.com/react-dom@18/umd/react-dom.production.min.js"
    ></script>
    <div id="root"></div>

Answer 2

您可以只使用 event 参数，其中 returns 选择的值。然后你的 handleColor 会像这样

const handleColor = (event) => {
  console.log(event.target.value);

  if (event.target.value === "blue") {
    setColor("blue");
  } else {
    setColor("red");
  }
};

  <select onChange={handleColor}>
    <option value="red">Red</option>
    <option value="blue">Blue</option>
  </select>
  <h1>{color}</h1>

那你也不需要使用选择状态

Codesandbox example

Answer 3

当您像这样分配一个 onChange 方法时，组件 (<select>) 只会向它发送 event 参数。如果调试 handleColor 方法，您会看到 newChoice 参数始终未定义。

您可以使用 event.target.value 访问 select 的当前值，甚至可以完全摆脱 choice 挂钩。

function ColorPick() {
  const [color, setColor] = useState("")

  const handleColor = (event) => {
    setColor(event.target.value)
  }

  return (
    <>
      <select onChange={handleColor}>
        <option value='red'>Red</option>
        <option value='blue'>Blue</option>
      </select>
      <h1>{color}</h1>
    </>
  )
}

状态变化呈现先前状态 React

Change of state render previous state React

setstate

reactjs