javascript - 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);
  };