[英]React-TypeScript: This JSX tag's 'children' prop expects a single child of type 'ReactNode', but multiple children were provided
I am using react-typescript for a class project in APIs, and am having issues.我正在将 react-typescript 用于 API 中的类项目,但遇到了问题。 I am trying to use .map to loop through an array of "popular" movies, but am getting the error message "This JSX tag's 'children' prop expects a single child of type 'ReactNode', but multiple children were provided."
我正在尝试使用 .map 循环浏览一系列“流行”电影,但收到错误消息“此 JSX 标记的 'children' 道具需要一个 'ReactNode' 类型的子级,但提供了多个子级。” I have a single div tag as the "parent", so I don't understand why it is giving me this error.
我有一个 div 标签作为“父”,所以我不明白为什么它会给我这个错误。 When I take the loop out and just put regular elements, I don't get the error message.
当我取出循环并只放置常规元素时,我没有收到错误消息。 Sorry if I'm not wording it too great, I'm still fairly new to this.
抱歉,如果我的措辞不太好,我对此还是很陌生。
Here is my Popular component这是我的热门组件
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>
)
}
Here is my Popular interface这是我的流行界面
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,
}
And here is the API I got it from.这是我从中得到的 API。
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})
}
ANY input would be greatly appreciated!!任何投入将不胜感激!!
Update: I figured it out.更新:我想通了。 I needed to get rid of the curly brackets inside of the .map loop
我需要去掉 .map 循环内的大括号
To complement the answer.补充答案。
The issue was that your .map
iterated with a void function (a function that doesn't return anything).问题是您的
.map
使用 void 函数(一个不返回任何内容的函数)进行了迭代。
You had 2 options:你有两个选择:
return
;return
; When working with Arrow Functions , you can write a single-line function that returns it's only statament.使用箭头函数时,您可以编写一个单行函数来返回它的唯一状态。
This:这个:
[1, 2].map((integer) => {
return integer + 1
})
It the same as this:它与此相同:
[1, 2].map((integer) => integer + 1)
Both return integer + 1
, but only the first must to explicit call for return
, or else nothing is returned.两者都返回
integer + 1
,但只有第一个必须显式调用return
,否则不返回任何内容。
By removing return
, you end up with an array of undefined
.通过删除
return
,您最终会得到一个undefined
数组。 Here is a snippet to help with visualizing it:这是一个有助于可视化它的片段:
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]
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.