在NextJs中导致水合错误的简单array.map

des4xlb0 于 2022-10-21 发布在其他

关注(0)|答案(2)|浏览(296)

我在NextJS中有一个奇怪的补水错误！我想知道有没有人能帮我弄清这件事的真相？
我有一个同步处理的对象。如果我串行化这个对象并呈现它，我不会收到错误。
但如果，在串起来之后，我Map它，我会得到这个水合错误。
这到底是怎么回事？

const OpponentList = ({ opponents }: Props) => {
  return (
    <ul>
      <p>{JSON.stringify(opponents)}</p>  // NO ERROR

      {opponents.map((opponent) => {.    // HYDRATION ERROR
        return <li key={opponent.username}>{opponent.username}</li>;
      })}
    </ul>
  );
};

export default OpponentList;

next.js

来源：https://stackoverflow.com/questions/74134589/simple-array-map-causing-hydration-error-in-nextjs

2条答案

按热度按时间

kuarbcqp1#

字符串形式将无法通过Map进行解析。.map()不是字符串的属性。它需要是一个数组。因此，要么执行JSON.parse(JSON.stringify(opponents))，要么直接使用opponents.map(如果对手是数组)。

赞(0）回复(0）举报 2022-10-21

c3frrgcw2#

由于您使用的是Next.js，因此可以通过在getServerSideProps方法中进行异步调用来解决这些问题。如果这样做，当客户端访问页面时，预期的数据将在客户端可用(不需要从客户端进行API调用)。
无论如何，如果你真的想在客户端做到这一点，你可以使用这样的东西。

const OpponentList = ({ opponents }: Props) => {
  const [mounted, setMounted] = useState(false);

  useEffect(() => {
    setMounted(true);
   }, [])

  return mounted ? (
    <ul>

      {opponents.map((opponent) => {.    // HYDRATION ERROR
        return <li key={opponent.username}>{opponent.username}</li>;
      })}
    </ul>
  ): <div/>;
};

export default OpponentList;

赞(0）回复(0）举报 2022-10-21

我来回答

在NextJs中导致水合错误的简单array.map

2条答案

相关问题

热门标签

最新问答