Мой компонент React не обновляется в браузере Safari

Итак, я решил очень странную проблему через несколько дней.

Происходило следующее: я предполагаю, что движок в браузере Safari неправильно перерисовывал маленький значок значка. Я бы распечатал значение внутри DOM, СНАРУЖИ стилизованного значка, который я использовал, и число обновилось бы, как и ожидалось... Это заставило меня поверить, что проблема связана со стилями.

ТОГДА после удаления того, что, как я думал, было причиной проблемы с CSS, я заметил, что сафари «частично» обновляло значение в значке. Похоже, что он наполовину перерендерился, и предыдущее число сталкивается с новым значением... Не уверен, что это какая-то неясная проблема с механизмом рендеринга?

После добавления и удаления всех CSS один за другим проблема осталась, поэтому я решил обмануть браузер, чтобы он «принудительно» рендерил с помощью простого вычисления внутри дочернего элемента, где он рендерился:

const safariRenderHack = { opacity: count % 2 ? 1 : 0.99 };

<div style = {safariRenderHack}>{count}</div>

Не лучшее решение, но да ладно, я думаю, это исправлено. га

В случае, когда есть изменяемые переменные, на основе которых вы можете переключаться между стилями (непрозрачность: 1 или непрозрачность: 0,99), вы можете попробовать добавить ключ к элементу, который не обновляется в Safari/iOS.

<div key = {new Date()} className = {'myComponent'}>{Count}</div>

Я столкнулся с той же проблемой, пока это работает.

Я просто столкнулся с подобной проблемой. Safari не перерисовывал некоторые тексты, реализованные как:

<span>{someValue}</span>

При обновлении поля «someValue» reactJS работал нормально (элемент был запрошен для рендеринга), но Safari повторно рендерит только область нового значения (короче, чем предыдущая). Глюки пользовательского интерфейса :-/

Если я что-то делал с CSS с помощью инструментов разработчика, элемент снова отображался и выглядел нормально :-/

После некоторых попыток я, к счастью, использовал свойство стиля 'отображение: блок;', и он начал перерисовываться абсолютно нормально. Также 'отображение: встроенный блок;' решит и эту проблему, если это необходимо.

это может помочь вам:

будет изменяться: трансформироваться;

У меня была аналогичная проблема, когда диапазон, расположенный по центру, с использованием flexbox внутри div, не обновлялся правильно в Safari.

Рестайлинг этого div для использования display:block решил эту проблему с рендерингом, так что, возможно, стоит обратить на это внимание, если кто-то столкнется с той же проблемой в будущем.

P.S. Глядя на код стиля сейчас, внесение изменений было на самом деле более чистым решением, поскольку оно уменьшило количество строк с 4 до 1, но, конечно, это может быть не во всех сценариях.

до:

display: flex;
flex-direction: row;
justify-content: center;
align-items: center;

after: (это div, поэтому display:block уже используется)

text-align: center;

При использовании функции картаРеагировать просматривает ключи:
Чтобы определить, какие элементы были изменены, добавлены или удалены.

Решение :

• Сейчас, Поскольку вы используете функцию карты, вы должны использовать Добавить ключ для div внутри карты.
• Использовать ключевая переменная, связанная с логикой щелчка, так что при нажатии клавиши переменная обновляется, и React перерисовывает этот дочерний элемент div. В виде следующего кода:
  <div key = {Count} className = {'myComponent'}>{Count}</div>

PS: я не рекомендую использовать Date в качестве ключа, потому что если вы быстро щелкаете, он дает сбои, а если вы соединяете его с состоянием с логикой, лежащей в основе щелчка, этого не произойдет.