React перехватывает обновление объекта в браузере Safari

Question

Обновление объекта React-хуков в браузере Safari вызывает странное поведение (только в браузере Safari)

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

setState

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