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

Question

我在页眉和页脚选项卡中使用 Grommet 创建了一个动态编辑器组件。当在 safari 中查看该站点时，当我更改字体大小等数据时，每个编辑器都会更改其位置。这只是 safari 中的问题：它在 Macintosh、windows 和 Linux 上的 Chrome 和 Firefox 中正常工作。它也不会出现在 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;
  };

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