I'm trying to pass objects of an array in another page using router.query, single objects such as router.query.title work fine, but when it comes to arrays such as router.query.reviews it returns something like this reviews: ['', '', '', '', '', '', '', '']. I've tried using router.isReady but nothing seems to change

Example object in the array

 {
    title: "Center-Hall",
    reviews: [
      {
        title: "Wislong Chew",
        comment: "jsdncjnsd csdncjds csjcnsdj csjdcn cdc djndc",
      },
      {
        title: "Wisdsdlong Chew",
        comment: "jsdncjnsd csdncjds csjcnsdj csjdcn cdc djndc",
      },
    ],
  },

Parent

{array.map((item) => (
          <Grid key={item} item>
            <Card
              label={item.title}
              onClick={() =>
                router.push({
                  pathname: "/page",
                  query: {
                    title: item.title,
                    reviews: item.reviews,
                  },
                })
              }
            />
          </Grid>
        ))}

Next Page

function index() {
  const router = useRouter();


  useEffect(() => {
    if (!router.isReady) return;
    console.log(router.query);
  }, [router.isReady]);


  const Reviews = () =>
      <ReviewCard
        reviewsList={router.query.reviews}
      />
    );

  return (
      <Box>
          <Typography>{router.query.title}</Typography>
          <Reviews />
      </Box>
  );
}

export default index;

CodePudding user response：

When you passing an array using router.query to another page parse it into a json string using the JSON.stringify method and on the next page parse the string into an array using the JSON.parse method

Parent

{array.map((item) => (
          <Grid key={item} item>
            <Card
              label={item.title}
              onClick={() =>
                router.push({
                  pathname: "/page",
                  query: {
                    title: item.title,
                    reviews: JSON.stringify(item.reviews),
                  },
                })
              }
            />
          </Grid>
        ))}

Next Page

function index() {
  const router = useRouter();


  useEffect(() => {
    if (!router.isReady) return;
    console.log(router.query);
    console.log(JSON.parse(router.query.reviews))
  }, [router.isReady]);


  const Reviews = () =>
      <ReviewCard
        reviewsList={JSON.parse(router.query.reviews)}
      />
    );

  return (
      <Box>
          <Typography>{router.query.title}</Typography>
          <Reviews />
      </Box>
  );
}

export default index;

CodePudding user response：

It happens when the array item is a JSON object.You can pass array but not array of objects.

 router.push({
                  pathname: "/planterupdate",
                  query: {
                    title: "test",
                    textArray: ["1","2","3","4"],//will work
                    reviews: [{num:1},{num:2},{num:3},{num:4}],//will not work
                    numArray: [5,6,7,8],//will work
                  },
                })

Sample log of query {title: 'test', textArray: Array(4), reviews: Array(4), numArray: Array(4)} numArray: (4) ['5', '6', '7', '8'] reviews: (4) ['', '', '', ''] textArray: (4) ['1', '2', '3', '4'] title: "test"