javascript - React-TypeScript: Denne JSX-tags 'children'-prop forventer et enkelt barn af typen 'ReactNode', men flere børn blev givet

Jeg bruger react-typescript til et klasseprojekt i API'er og har problemer. Jeg prøver at bruge .map til at gennemløbe et array af "populære" film, men får fejlmeddelelsen "This JSX tag's 'children' prop expects a single child of type 'ReactNode', but multiple children were provided." Jeg har et enkelt div-tag som "forælder", så jeg forstår ikke, hvorfor det giver mig denne fejl. Når jeg fjerner loopet og bare sætter almindelige elementer ind, får jeg ikke fejlmeddelelsen. Undskyld, hvis jeg ikke formulerer mig særlig godt, jeg er stadig ret ny til det.

Her er min Populære komponent

import React, { useEffect, useState } from 'react';
import Genres from '../models/Genres';
import Results from '../models/Popular';
import GenreListService from '../services/GenreList';
import getPopular from '../services/GetPopular';


export default function Popular() {
    const[popular, setPopular] = useState<Results[]>()
    const [genres, setGenres] = useState<Genres[]>()
    useEffect(() => {
        getPopular().then(data => {
            setPopular(data);
        });
    }, []);
    useEffect(() => {
        GenreListService().then(data => {
            setGenres(data);
        });
    }, []);
  return (
    <div className="Popular"> {/* This is where I get the error message */}
        <h1>POPULAR MOVIES</h1>
            {   
                popular?.map((thing, index) => {
                    <div key={index}>
                        <p>{thing.title}</p>
                        <p>{thing.overview}</p>
                        <p>{thing.genre_ids}</p>
                    </div>
                })
            }
    </div>
  )
}

Her er min populære grænseflade

export interface Popular {
    results: Results[]
}

export default interface Results {
    backdrop_path: string,
    genre_ids: number[],
    id: number,
    overview: string,
    poster_path: string,
    release_date: string,
    title: string,
    vote_average: 6.8,
}

Og her er API'en, jeg fik den fra.

import axios from "axios";
import Results, { Popular } from "../models/Popular";

export default function getPopular(): Promise<Results[]>{
    return axios
        .get<Popular>("https://api.themoviedb.org/3/movie/popular?api_key={api-key}")
        .then((response) => {return response.data.results})
}

Enhver form for input vil blive meget værdsat!!

Svar #1

Opdatering: Jeg fandt ud af det. Jeg skulle fjerne krøllede parenteser inde i .map-løkken

Svar #2

For at supplere svaret.

Problemet var, at din .map itererede med en void-funktion (en funktion, der ikke returnerer noget).

Du havde 2 muligheder:

  • Tilføjelse af en return;
  • Fjerner parenteser.

Når man arbejder med pilfunktioner, kan man skrive en enkeltlinjefunktion, der returnerer dens eneste udsagn.

Dette :

[1, 2].map((integer) => {
  return integer + 1
})

Det er det samme som dette:

[1, 2].map((integer) => integer + 1)

Begge returnerer integer + 1, men kun den første skal eksplicit kalde på return, ellers returneres der ingenting.

Ved at fjerne return ender du med et array af undefined. Her er et uddrag til at hjælpe med at visualisere det:

result1 = [1, 2].map((integer) => {
  return integer + 1
})
console.log(result1) // > [2, 3]

result2 = [1, 2].map((integer) => integer + 1)
console.log(result2) // > [2, 3]

result3 = [1, 2].map((integer) => {
  integer + 1
})
console.log(result3) // > [undefined, undefined]

Relaterede artikler