Tengo un guión muy simple.
Aquí está el index.tsx de mi próxima aplicación:
import type { NextPage } from 'next' import SongsList from '../components/SongsList/SongsList' import { GetStaticProps } from 'next' import styles from '../styles/Home.module.css' const SONGS: Song[] = [ { title: 'Birdseye Blues', artist: 'Chris Haugen', file: 'Birdseye Blues - Chris Haugen.mp3', image: 'https://images.unsplash.com/photo-1598387993441-a364f854c3e1?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1176&q=80' }, { title: 'Depth Fuse', artist: 'French Fuse', file: 'Depth Fuse - French Fuse.mp3', image: 'https://images.unsplash.com/photo-1617136785693-54b279bddfeb?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=2070&q=80' }, { title: 'Duh Fuse', artist: 'French Fuse', file: 'Duh Fuse - French Fuse.mp3', image: 'https://images.unsplash.com/photo-1614247912229-26a7e2114c0a?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=1170&q=80' } ] interface Song { title: string; artist: string; file: string; image: string } const Home: NextPage<Song> = (props) => { return ( <div className={styles.container}> <SongsList songs={props.songs} /> </div> ) } export const getStaticProps: GetStaticProps = async() => { return { props: { songs: SONGS }, revalidate: 3600 } } export default HomeLamentablemente, tengo un error allí mismo:
<SongsList songs={props.songs} />El error dice:
(property) songs: any Type '{ songs: any; }' is not assignable to type 'IntrinsicAttributes'. Property 'songs' does not exist on type 'IntrinsicAttributes'.ts(2322)Aquí está mi componente SongsList.tsx:
import { NextPage } from 'next' import Song from '../Song/Song' type Song = { title: string; artist: string; file: string; image: string; } const SongsList: NextPage<Song> = ( props: any ) => { return ( <div> { props.songs.map(function(e: any) { return ( <Song song={e} key={e.title} /> ) }) } </div> ) } export default SongsList;¿Qué hice mal allí?
Editar: probé todas las soluciones a continuación, pero ninguna solución funciona, edité y agregué SongList.tsx para Bao Huynh Lam
Gracias por tu ayuda :) !
Creo que aquí está tu error:
const Home: NextPage<Song> = (props) => { return ( <div className={styles.container}> <SongsList songs={props.songs} /> </div> ) }Cambiar a:
const Home: NextPage<Song> = (props) => { const myProps = { term: this.props.songs } return ( <div className={styles.container}> <SongsList {...myProps} /> </div> ) }