React hooks 對象更新在 Safari 瀏覽器上出現奇怪的行為

Question

React hooks 對象更新在 Safari 瀏覽器上出現奇怪的行為（僅在 Safari 瀏覽器上）

const [state, setState] = React.useState({
  show_welcome: true,
  show_inline: false,
  restriction: false,
  request_dp: false,
  prevent_rtl: false,
  lang: "ta"
});

設置狀態

const handleToggle = ({ target }) => {
  setState(s => ({ ...s, [target.name]: !s[target.name] }));
};

有什么東西會破壞 Safari 瀏覽器的對象順序🤔

Answer 1

發生這種情況的原因是因為它正在重新渲染您用於鍵的數組，並且鍵的順序與它們在第一次渲染中的順序不同。 您可以通過在第一次返回之前添加console.log(state)來查看這一點。 Safari 在這方面比 Chrome 或 Firefox 更嚴格。

您可以通過在使用數組渲染之前對數組進行排序來解決此問題。

您還可以通過將切換功能更改為以下內容來解決此問題：

const handleToggle = ({ target }) => {
    const tempState = { ...state };
    tempState[target.name] = !tempState[target.name];
    setState(tempState);
  };