使用 react 钩子重用数据

Question

我需要用钩子重用我的应用程序中的数据，所以我创建了一个名为useData的钩子

import { useState } from "react";

export default function useData() {
  const [message, setMessage] = useState("");
  const [type, setType] = useState("error");

  return [{ message, type }, { setMessage, setType }];
}

然后我在我的应用程序中使用我的钩子，如下所示。

function App() {
  const [data, action] = useData();

  const handleClick = () => {
    action.setMessage("Hello message");
    action.setType("info");

    alert(JSON.stringify(data));
  };

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button className="btn" onClick={handleClick}>
        Alert Data
      </button>
    </div>
  );
}

当我第一次单击按钮Alert Data时，它会发出警报

{message: "", type: "error"}

我的期望是

{message: "Hello message", type: "info"}

我在这里做错了什么？ 请让我知道，有没有办法修复此代码？

这是代码和框代码： https ://codesandbox.io/embed/romantic-hugle-zm2e2 ? fontsize =14& hidenavigation =1& theme = dark

感谢您的关注。

Answer 1

您指望在调用onClick处理程序时立即更新data ，但直到下一次渲染才会如此。 相反，请考虑使用useEffect钩子。 在下面的示例中，我还创建了一个有状态的open变量来告诉模态何时打开。

function App() {
  const [data, action] = useData();
  const [open, setOpen] = useState(false);

  const handleClick = () => {
    action.setMessage("Hello message");
    action.setType("info");
    setOpen(true);
  };

  useEffect(() => {
    if (open) {
      alert(JSON.stringify(data));
      setOpen(false);
    }
  }, [open, data])

  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <button className="btn" onClick={handleClick}>
        Alert Data
      </button>
    </div>
  );
}

Answer 2

在 React.js 中， setState 不是同步函数。 也就是说， setState 不会立即更改状态。 对于这种情况， setState 有一个带有完成回调的版本。 您可以使用完成回调定义自定义 Hook。 幸运的是，有一个名为“use-state-with-callback”的 npm 包。

或者您可以编写如下代码。

使用Data.js

 export default function useData(msg, cb) { const [message, setMessage] = useState(msg); useEffect(() => cb(message), [message]); return [message, setMessage]; }

索引.js

 function App() { const callback = (msg) => { alert(JSON.stringify(msg)); } const [message, setMessage] = useData({ content: "", type: "error" }, callback); const handleClick = () => { setMessage({ content: "Hello message", type: "info" }); }; return ( <div className="App"> <h1>Hello CodeSandbox</h1> <h2>Start editing to see some magic happen!</h2> <button className="btn" onClick={handleClick}> Alert Data </button> </div> ); } const rootElement = document.getElementById("root"); ReactDOM.render(<App />, rootElement);

这工作正常。