Bien, aquí está mi problema. Obtengo accesorios a través de getserversideprops, y he intentado varias correcciones, pero no puedo hacer que se muestre. Aquí está el código:
import React, { Component } from 'react'; import rpstyle from '/styles/home/recentPosts.module.css' export default class RecentPosts extends Component { constructor() { super() this.state = { posts: this.props.posts } } static async getServerSideProps() { const res = await fetch('http://localhost:5000/search/recentposts') const json = await res.json() return { posts : json } } viewAllButton(){ if(this.props.viewAll != false){ return ( <div className={rpstyle.viewAll}> <a href='#'>View All Posts</a> </div> ) } else { return null } } render() { return ( <div className={rpstyle.container}> <hr /> <h1>Recent Posts</h1> {console.log(this.props.posts)} {this.viewAllButton()} </div> ) } } Por alguna razón, no puedo encontrar una buena guía para los componentes basados en clases y este método. Si alguien tiene alguna idea sobre cómo hacer que esto no se muestre undefined , ¡hágamelo saber!
hola, también puede usar la misma api para las clases, si está usando una versión reciente de next, debe cambiar el objeto de retorno de getServerSideProps, debe tener una clave de accesorios
import React, { Component } from 'react'; export default class RecentPosts extends Component { constructor(props) { super(props) this.state = { posts: props.data } } viewAllButton(){ if(this.props.viewAll != false){ return ( <div className={rpstyle.viewAll}> <a href='#'>View All Posts</a> </div> ) } else { return null } } render() { return ( <> <hr /> <h1>Recent Posts</h1> {console.log(this.state)} {/* {this.viewAllButton()} */} </> ) } } export async function getServerSideProps() { const res = await fetch('https://reqres.in/api/users') const json = await res.json() return { props : json } }De acuerdo, tomé un poco de sus respuestas e investigué un poco más y encontré que esto funciona muy bien:
import Recentstuff from '../components/home/recentposts/RecentPosts' export default function Home({data}) { return ( <div> <Recentstuff posts={data} /> </div> ) } export const getServerSideProps = async () => { const res = await fetch('http://localhost:5000/search/recentposts') const data = await res.json() return { props : {data} } }Espero que esto ayude a cualquiera que haya tenido el mismo problema. Tienes que llamarlo dentro del archivo de la página, luego pasarlo como accesorio. ASEGÚRESE de desestructurarlo correctamente, porque tuve un poco de tiempo rastreando por qué mis llamadas a la API se mostraban en mi API pero no en mi cliente.