无法在函数中使用 useState 获取第一个值

Question

我需要根据数据值显示文本。通过运行代码，我希望看到单击按钮后可以显示“Test1：1”，但我不能。有什么方法可以实现这一点吗？

以下是包含代码的示例沙箱链接。 https://codesandbox.io/s/restless-wildflower -9pl09k?file=/src/Parent.js

export default function Parent(props) {
  const [data, setData] = useState(0);
  const onClick = () => {
    setData(1);
    console.log(data);
    setData(2);
  };
  return (
    <>
      <button onClick={onClick}> Click here </button>
      {data === 1 ? <div>Test1: {data}</div> : <div>Test2: {data}</div>}
    </>
  );
}

Answer 1

useState 返回的 setState 函数不会直接更新状态。相反，它用于发送 React 在下一次异步状态更新期间将使用的值。 console.log 是一种效果，因此如果您想查看每次更改时记录的data，您可以使用 React.useEffect。 运行下面的代码并单击0按钮几次以查看浏览器中的状态变化和效果。

function App() {
  const [data, setData] = React.useState(0)
  React.useEffect(_ => console.log("data", data), [data])
  return <button
    onClick={_ => setData(data + 1)}
    children={data}
  />
}

ReactDOM.render(<App/>, document.querySelector("#app"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

您的评论讨论了网络请求示例。可以设计自定义挂钩来适应复杂的用例并使您的组件易于编写。

function App() {
  const [{fetching, error, data}, retry] = useAsync(_ => {
    return fetch("https://random-data-api.com/api/users/random_user")
      .then(res => res.json())
  }, [])
  if (fetching) return <pre>Loading...</pre>
  if (error) return <pre>Error: {error.message}</pre>
  return <div>
    <button onClick={retry} children="retry" />
    <pre>{JSON.stringify(data, null, 2)}</pre>
  </div>
}

function useAsync(f, deps) {
  const [state, setState] = React.useState({fetching: true})
  const [ts, setTs] = React.useState(Date.now())
  React.useEffect(_ => {
    f()
      .then(data => setState({fetching: false, data}))
      .catch(error => setState({fetching: false, error}))
  }, [...deps, ts])
  return [
    state,
    _ => {
      setState({fetching: true, error: null, data: null})
      setTs(Date.now())
    }
  ]
}

ReactDOM.render(<App/>, document.querySelector("#app"))

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.14.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.14.0/umd/react-dom.production.min.js"></script>
<div id="app"></div>

Answer 2

console.log(data) 没有反映最新数据的原因是 React 管理状态。对 setState() 的调用是异步的，如果您想依赖状态的新值，正确的方法是传递旧状态的函数，返回当前状态。 参考。文档