如何阻止 Grommet 组件在 Safari 中循环

Question

我在页眉和页脚选项卡中使用索环创建了一个动态编辑器组件。在 safari 浏览器中查看网站时，当我更改字体大小等数据时，每个编辑器都会更改其位置。这仅在 safari 中是一个问题：它在 Chrome 和 Firefox on 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,
        }}
      >

Answer 1

尝试看看是否用实际的索环道具替换样式是否有效，并且在它之上，只是为了将其密封更多一点，看看添加 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}
      >

Answer 2

我通过添加一个排序器来修复它，这样排序器函数会在对象创建时对其进行排序，基本上，问题出在我更新状态的地方

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

谢谢大家的帮助，来到这里感觉很好。

如何阻止 Grommet 组件在 Safari 中循环

How to stop Grommet component from looping in Safari

javascript

safari

macos

grommet

next.js