将按钮文本传递给状态，但文本在 React 挂钩中的页面刷新期间恢复

Question

我有一个带有两个按钮的记录，点击 Accept 按钮应该将数据发送回服务器并将文本显示到 Save，之后不应更改文本（应该只更改对于点击的按钮）。在下面的示例中，它在单击期间更改了文本，这很好，但是在刷新页面时它将文本设置回 Accept。有人可以告诉我如何解决这个问题吗？

import { useState, useEffect } from "react";
import "./styles.css";
export default function App() {
  const [acceptPlayer, setAcceptPlayer] = useState("Accept");

  const postData = (e) => {
    const text = "Save";
    setAcceptPlayer(text);
  };
  return (
    <div className="App">
      <div>
        <button onClick={postData} value="accept">
          {acceptPlayer}
        </button>
      </div>
    </div>
  );
}

https://codesandbox.io/s/admiring-austin-1w1g38?file=/src/App.js

Answer 1

当然，它会回到 Accept，因为 React 只在本地存储状态。因此，每次刷新页面时，它都会返回到 initial state。

因此，如果您想在组件中获取更新状态，则必须从 useEffect 中的数据库中获取最新数据，并将其设置为状态。

Answer 2

这段代码没有任何问题。这是反应的预期行为。 React 或任何其他框架不会在刷新时保持状态这是 BE 的责任。

解决方法：当你可以得到 API 在页面上显示数据时，在 API 响应中，你可以 return 以下格式的数据：

{
    isAccepted: false,
    //...something else
}

当您单击接受按钮并调用 API 时，BE 负责在下次调用 API 时更新 isAccepted 标志。您将收到以下回复：

{
    isAccepted: true,
    //...something else
}

根据 isAccepted 标志，您可以切换按钮文本。

将按钮文本传递给状态，但文本在 React 挂钩中的页面刷新期间恢复

Passed the button text to state, but text reverted back during page refresh in React hooks

reactjs

react-hooks