解决此错误后，图像无法呈现-序列化“/”`中的`getStaticProps`返回的`.Meetups[0].tile`时出错

km0tfn4u 于 2022-10-01 发布在其他

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

我犯了和上面一样的错误。我在这里找到了一个解决了这个错误的答案。然而，我现在的问题是，屏幕上没有任何图像渲染。我不知道该去哪里找。请帮帮忙。控制台上也没有错误。它编译起来没有任何问题。

以下是我的代码和输出的屏幕截图。

export async function getStaticProps() {
    const client = await MongoClient.connect(
        'mongodb+srv://erickn:password@cluster0.66smcyq.mongodb.net/meetups?retryWrites=true&w=majority'
    );

    const db = client.db();

    const meetupsCollection = db.collection('meetups');
    console.log(client)
    // Fetch data from an API.

    const meetups = await meetupsCollection.find().toArray();

    client.close();

    // Always need to return an objects (props).
    return {
        props: {
            // meetups: DUMMY_MEETUPS
            // meetups: meetups
            meetups: JSON.parse (
                JSON.stringify (
                    meetups.map(m => ({
                    title: m.title,
                    address: m.address,
                    image: m.image,
                    id: m._id.toString(),
                }))
            )
        )
    },
        // Regenerate website using the updated data after deployment.
        revalidate: 1,
    };
}

next.js

来源：https://stackoverflow.com/questions/73862349/images-wont-render-after-solving-this-error-error-serializing-meetups0-tit

2条答案

按热度按时间

k5ifujac1#

@lpizinidev--这不是答案。我只是用它来发布代码片段，因为它没有对注解起作用。

return (
    <ul className={classes.list}>
      {props.meetups.map((meetup) => (
        <MeetupItem
          key={meetup.id}
          id={meetup.id}
          image={meetup.image}
          title={meetup.title}
          address={meetup.address}
        />
      ))}
    </ul>
  );
}```
```const MeetupDetail = (props) => {
  return (
    <section className={classes.detail}>
      <img src={props.image} alt={props.title} />

      <h1>{props.title}</h1>
      <address>{props.address}</address>
      <p>{props.description}</p>
    </section>
  );
};```
```function MeetupItem(props) {
  const router = useRouter();

  const showDetailsHandler = () => {
    router.push("/" + props.id); // Equivalent to 'Link'
  };

  return (
    <li className={classes.item}>
      <Card>
        <div className={classes.image}>
          <img src={props.image} alt={props.title} />
        </div>
        <div className={classes.content}>
          <h3>{props.title}</h3>
          <address>{props.address}</address>
        </div>
        <div className={classes.actions}>
          <button onClick={showDetailsHandler}>Show Details</button>
        </div>
      </Card>
    </li>
  );
}```

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

ykejflvf2#

我终于解决了这个问题--当然也是通过研究！以下是对我起作用的解决方案。

return {
    props: {
      // meetups: DUMMY_MEETUPS
      //   meetups:
      meetups: JSON.parse(
        JSON.stringify(
          meetups.map((meetup) => ({
            title: meetup.data.title,
            address: meetup.data.address,
            image: meetup.data.image,
            // src: meetup.image,
            id: meetup._id.toString(),
          }))
        )
      ),
    },
    // Regenerate website using the updated data after deployment.
    revalidate: 1,
  };
}

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

我来回答

解决此错误后，图像无法呈现-序列化“/”`中的`getStaticProps`返回的`.Meetups[0].tile`时出错

2条答案

相关问题

热门标签

最新问答