跟踪状态变化？

Question

组件代码有几个参数，每个参数都有一个从服务器接收到的初始值。我如何跟踪其中一个（或同时多个）已从原始状态更改其状态，以建议用户保存更改或重置它们？

更改配置文件/服务器时，可以在 Discord 中看到类似的内容。

我找到的使用useEffect()的解决方案看起来是多余的，因为可能有很多倍的选择。

const [hiddenData, setHiddenData] = useState(server.hidden_data);
const [hiddenProfile, setHiddenProfile] = useState(server.hidden_profile);
const [isChanged, setIsChanged] = useState(false);

useEffect(() => {
  if (hiddenData !== server.hidden_data
  || hiddenProfile !== server.hidden_profile) {
    setIsChanged(true);
  } else {
    setIsChanged(false);
  }
}, [hiddenData, server.hidden_data, hiddenProfile, server.hidden_profile]);

return (
  <>
    {isChanged && <div>You have unsaved changes!</div>}
  </>
);

Answer 1

也许是这样的？

const [draftState, setDraftState] = useState(server)
const [state, setState] = useState(server)

// a more complex object with the list of changed props is fine too
const isChanged = lodash.isEqual(state, draftState)

function changeProp (prop, value) {
  setState({
    ...draftState,
    [prop]: value
  })
}

function saveState () {
  setState(draftState)
  // Persist state if needed
}

跟踪状态变化？

Tracking changes in state?

javascript

reactjs

use-effect