同步状态变量的最佳方式

Question

我是原生反应新手，正在尝试为我的应用程序创建入门，这是一个简化版本。为了阻止用户半回答我的入职问题并允许他们搞乱用户数据，我有一个

tempUserData

进行更改，一旦他们完成一个部分，这些更改将最终提交给

userData

。

问题是，当我调用

setTempUserData

（已回答部分的最后一个问题），然后调用

commitUserData

提交数据时，旧版本的

tempUserData

会提交到

UserData

。

我的想法是，这可能与某种竞争条件有关，但我无法找出解决此问题的最佳方法，也许以某种方式同步更新，或者如果我的入职策略不正确理想的。谢谢你的帮助。

const [tempUserData, setTempUserData] = useState({ name: '', age: '' });
  const [userData, setUserData] = useState({ name: '', age: '' });

  // Function to update temp user data
  const updateTempUserData = (newData) => {
    setTempUserData((prevTempUserData) => ({
      ...prevTempUserData,
      ...newData,
    }));
  };

  // Function to commit temp user data to actual user data
  const commitUserData = () => {
    setUserData((prevUserData) => ({
      ...prevUserData,
      ...tempUserData,
    }));
  };

我希望

userData

反映

tempUserData

的最后状态，但我不知道这是否是使用 React 的自然方式，或者是否有更好的方法来解决这个问题。

Answer 1

对

tempUserData

的更改仅在 GUI 重新呈现时可见。当 Reactjs 重新渲染 GUI 时，您只能看到

state

更新，并且它通常会批量处理此 GUI 重新渲染，并且出于性能原因不会即时执行此操作，因此与此同时，您将看到的只是过时的值

tempUserData

直到下一次重新渲染发生。 ^[1]

您最好保留一个单独的简单 Javascript 对象，将其用于其他计算，同时将

state

单独保留用于 GUI 渲染。唯一的问题是

state

将在多次 GUI 重新渲染中持续存在，而每次 GUI 重新渲染发生时 Javascript 对象都不会被保留。

更好的选择是使用对值的引用。通过 GUI 重新渲染将保留的引用。这些参考资料将被保留。我说的是

useRef

但当然 Reactjs 不会跟踪此类引用的突变，因此如果您想继续向用户显示

state

更新，您当然必须使用 Reactjs 将跟踪并重新渲染的

state

GUI 发生变化时，以便更改可以反映在 GUI 中。

这是一种解决方案：

const data = { name: '', age: '' }
const [tempUserData, setTempUserData] = useState(data)
const { current: tempUserDataRef } = useRef(data)
const [userData, setUserData] = useState(data)

const updateTempUserData = (newData) => {
  setTempUserData(prevTempUserData => ({
    ...prevTempUserData,
    ...newData
  }))
  tempUserDataRef = {
    ...tempUserDataRef,
    ...newData
  }
}

const commitUserData = () => {
  setUserData(prevUserData => ({
    ...prevUserData,
    ...tempUserDataRef
  }))
}

---

_{^[1] Reactjs 所做的不仅仅是重新渲染 GUI。}