React hooks 对象更新在 Safari 浏览器上出现奇怪的行为答案

【问题标题】：React hooks object update gets strange behaviour on Safari browserReact hooks 对象更新在 Safari 浏览器上出现奇怪的行为
【发布时间】：2020-04-25 04:08:30
【问题描述】：

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 浏览器的对象顺序？？？？

【问题讨论】：

你是否检查了没有来自react-bootstrap的CSS的相同逻辑？为什么你认为这是一个“react-hooks”问题？
stackoverflow.com/questions/5525795/…
您是否尝试在表单输入中添加key={key}？
您在每次更新时将更新的属性放在对象的末尾。因此，您与之交互的项目将呈现在底部。

标签： javascript arrays reactjs object react-hooks

【解决方案1】：

发生这种情况的原因是因为它正在重新渲染您用于键的数组，并且键的顺序与它们在第一次渲染中的顺序不同。您可以通过在第一次返回之前添加console.log(state) 来查看这一点。 Safari 在这方面比 Chrome 或 Firefox 更严格。

您可以通过在使用它进行渲染之前对数组进行排序来解决此问题。

您也可以通过将切换功能更改为以下内容来解决此问题：

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

【讨论】：

OP 没有使用数组，他使用的是对象。
Object.keys(state).map(...) 返回一个数组。 =)