覆盖特定的 JSON 值，但保留未覆盖的值

Question

我目前正在开发一个应用程序，从服务器发送的事件接收数据。数据流在开始时将所有内容发送一次，并仅更新需要更新的字段。我的问题是如何保存原始 JSON 对象并仅更新更新的项目。

此时，所有项目都已更新。例如，如果我收到一个包含 2 个项目的标准 JSON 对象

{color: "black", id: 0}

并且收到以下更新

{ id: 1 }

，则该对象如下

{color: "", id: 1}

因此该对象会被空项目覆盖，因为它不存在。

const [initialUserData, setInitialUserData] = useState({
  id: 1,
  name: 'Pol',
  color: 'black',
});

useEffect(() => {
  const unsubscribe = sse.subscribe('playerupdate', (d: any) => {
    const receivedData = d;
    const updatedUserData = { ...initialUserData, ...receivedData }; // Create a copy of initialUserData

    // Iterate over the keys in receivedData and update updatedUserData
    for (const key in receivedData) {
      if (receivedData.hasOwnProperty(key)) {
        updatedUserData[key] = receivedData[key];
        console.log(key);
      }
    }

    updateUserData(updatedUserData);

    if (updatedUserData.PlayerId > 0) {
      setSessionState(true);
    } else if (updatedUserData.PlayerId === 0) {
      setSessionState(false);
    }
  });

  return unsubscribe;
}, []);

我正在使用ReactJs Context API，这对我来说是新的，但它似乎不是问题，因为它更新完美。

Answer 1

看看我的版本：

const [initialUserData, setInitialUserData] = useState({
  id: 1,
  name: 'Pol',
  color: 'black',
});

useEffect(() => {
  const unsubscribe = sse.subscribe('playerupdate', (receivedData: any) => {
    // Merge the receivedData into the initialUserData
    const updatedUserData = { ...initialUserData, ...receivedData };

    updateUserData(updatedUserData);

    setSessionState(updatedUserData.PlayerId > 0);
  });

  return unsubscribe;
}, []);

您不需要那个

for in

循环。我在

setSessionState

中添加了另一个更正。当值为boolean时，不需要添加大量代码，可以直接使用它们，而不用使用

if-then else

。