I am trying to do getServerSideProps but I am getting the following error what is the error I am doing

TypeError: Cannot read properties of undefined (reading 'map')

import React from "react";
import axios from "axios";
import { useState, useEffect } from "react";
import { FormControl, Button } from "react-bootstrap";
import Card from "react-bootstrap/Card";

export default function Answershooks(props, { posts }) {


  return (
    <div className="answerhook">
       {posts.map((personData, index) => {
        return (
          <Card key={index} className="cardmobile">
            <Card.Body>
              <p className="answersize">{personData.Answers} </p>
            </Card.Body>
          </Card>
         );
      })}
    </div>
  );
}
export async function getServerSideProps(ctx) {
  
  const res = await fetch("https://askover.wixten.com/answersapi/"   props.id);
  console.log(res);
  console.log("dada");
  const posts = await res.json();

  // By returning { props: { posts } }, the Blog component
  // will receive `posts` as a prop at build time
  return {
    props: {
      posts,
    },
  };
}

i have added added a file stucture screenshot so u undersand how my files are placed

CodePudding user response：

Your main problem is you're trying to call getServerSideProps in Answerhooks but it's not a page component, so you cannot get data on the server as expected

Instead of having getServerSideProps in that, you can move your API call to getServerSideProps in [itmid].jsx (which is an actual page component) like below

export async function getServerSideProps(ctx) {
  var id = ctx.query.itmid;

  const queryRequest = fetch("https://ask-over.herokuapp.com/questone/"   id).then(async (res) => await res.json());
  const answerRequest = fetch("https://askover.wixten.com/answersapi/"   id).then(async (res) => await res.json());
  const [posts, answerPosts] = await Promise.all([queryRequest, answerRequest]);

  return {
    props: {
      posts,
      answerPosts
    }
  };
}

After that, you can get answerPosts from props for Query

function Query({ posts, answerPosts }) {
   return <Answerhooks answerPosts={answerPosts} />
}

Finally, you can have the data on props inside Answerhooks component

function Answershooks({ answerPosts }) {
   
   //TODO: Apply your logic with `answerPosts`
   console.log(answerPosts)

   return <div></div>
}

CodePudding user response：

Lets start with the fetch error and work out why that is failing so make a new component.

fetchHandler.js

export async function fetchHandler(url){
  try{
      const res = await fetch(url);
      return res
  } catch(err){
      console.log(err); //this will tell us why it failed.
      return false //this gives us a condition we can use on the front end
    } 
}

Then your Answerhooks.

import {fetchHandler} from '../yourpath'

export default function Answershooks({ posts }) {


  return (
    <div className="answerhook">
       {posts.map((personData, index) => {
        return (
          <Card key={index} className="cardmobile">
            <Card.Body>
              <p className="answersize">{personData.Answers} </p>
            </Card.Body>
          </Card>
         );
      })}
    </div>
  );
}
export async function getServerSideProps(ctx) {

  const url = `https://askover.wixten.com/answersapi/${ctx.query.id}`
  const res = await fetchHandler(url)
  console.log(res);
  const posts = await res.json();

  return {
    props: {
      posts: posts === false ? [] : posts //Just to stop your app crashing
    },
  };
}

CodePudding user response：

I think the problem comes from props.id in your fetch method because your can't access props in getServersideProps that MUST be called in a page. You should try to get the id from the url like http://.....?id=your-id

Then in getServerSideProps

export async function getServerSideProps(ctx) {
  
const res = await fetch(`https://askover.wixten.com/answersapi/${ctx.query.id}`);
console.log(res);
const posts = await res.json();

return {
  props: {
    posts,
  },
};

}

CodePudding user response：

export const getServerSideProps = wrapper.getServerSideProps(
    (store) =>
        async ({req}) => {

         const result =  await store.dispatch(fetchHome());

            return {
                props: {
                    list : result
                },
            };
        }
);