onclick 处理程序中的 useState答案

【问题标题】：useState in onclick handleronclick 处理程序中的 useState
【发布时间】：2022-06-14 22:49:13
【问题描述】：

这是用户界面

我点击第一个按钮，然后点击第二个按钮，它显示值 1，但我希望它显示值 2，因为我将值设置为 2。有什么问题，我应该如何解决这个问题？

代码如下：

import { StrictMode } from "react";
import { createRoot } from "react-dom/client";

import React, {
  useState,
  useEffect,
  useMemo,
  useRef,
  useCallback
} from "react";

const App = () => {
  const [channel, setChannel] = useState(null);

  const handleClick = useCallback(() => {
    console.log(channel);
  }, [channel]);
  
  const parentClick = () => {
    console.log("parent is call");
    setChannel(2);
  };
  useEffect(() => {
    setChannel(1);
  });
  return (
    <div className="App">
      <button onClick={parentClick}>Click to SetChannel 2</button>
      <button onClick={handleClick}>Click to ShowChannel 2</button>
    </div>
  );
};

const rootElement = document.getElementById("root");
const root = createRoot(rootElement);
root.render(<App />);

这是codesandbox

【问题讨论】：

标签： javascript reactjs use-state

【解决方案1】：

useEffect(() => {
    setChannel(1);
  });

在每次渲染时运行，所以它总是恢复到 1

【讨论】：