Как остановить зацикливание компонента Grommet в Safari
Я создал компонент динамического редактора с Grommet на вкладках верхнего и нижнего колонтитула. Когда сайт просматривается в сафари, каждый редактор меняет свою позицию, когда я вношу изменения в данные, такие как размер шрифта. Это проблема только в сафари: она нормально работает в Chrome и Firefox на Macintosh, Windows и Linux. Этого также нет в Safari Big Sur, но это происходит в предыдущих версиях Mac, таких как Catalina и High Sierra.
Вот мой код и скриншот компонента:
{toPairs(footerTexts).map(
([key, text]) =>
text !== undefined && (
<Box
id = {text.id}
key = {text.id}
style = {{
height: 132,
width: 500,
paddingTop: 20,
}}
>
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Попробуйте посмотреть, поможет ли замена стилей на настоящие люверсы, и, кроме того, просто для того, чтобы еще немного изолировать их, посмотрите, поможет ли добавление flex = {false} следующим образом:
{toPairs(footerTexts).map(
([key, text]) =>
text !== undefined && (
<Box
id = {text.id}
key = {text.id}
height = "132px"
width = "500px"
pad = {{top: "20px"}}
flex = {false}
>
Я исправил это, добавив сортировщик, чтобы функция сортировщика сортировала объект по времени его создания, в основном проблема заключалась в том, где я обновляю состояние
{toPairs(headerTexts)
.map(([, text]) => text)
.sort(sorter)
.map(
(text) =>
text !== undefined && (
<Box
key = {text.id}
style = {{
width: 500,
marginTop: 20,
}}
>
Обновление состояния подтолкнет обновленный объект к концу объекта, поэтому тот редактор, который сейчас обновляется, перейдет к нижней части объекта, поэтому он зацикливался.
const updateTextFooter = (text, key) => {
if (key !== "") {
setFooterTexts({
...footerTexts,
[key]: {
...footerTexts[key],
text,
},
});
}
};
чтобы решить эту проблему, это сортировщик, который я добавил
const sorter = (a, b) => {
const first = a.createdAt;
const second = b.createdAt;
let comparison = 0;
if (first > second) {
comparison = 1;
} else if (first < second) {
comparison = -1;
}
return comparison;
};
Спасибо всем за помощь, приятно находиться здесь.