未捕获错误:Info(..):没有从渲染返回任何内容.这通常意味着缺少返回语句.或者，如果不呈现任何内容，则返回null

Question

问题是当我点击

时它没有上传卡片页面https://i.stack.imgur.com/Ep4J8.png

主页是这样的

https://i.stack.imgur.com/yC77U.png

我{suscpect问题在于国家,,& lt;信息{…国家}/祝辞}这可能是由于{…国家}不正常购买的方式提前感谢你的帮助Info.jsx

import React from 'react';
import styled from 'styled-components';
import axios from 'axios';
import {useState, useEffect} from 'react';
import { filterByCode } from '../config';
const Wrapper = styled.section`
margin-top: 3rem;
width: 100%;
display: grid;
grid-template-columns: 100%;
gap: 2rem;
@media (min-width: 767px) {
grid-template-columns: minmax(100px, 400px) 1fr;
align-items: center;
gap: 5rem;
}
@media (min-width: 1024px) {
grid-template-columns: minmax(400px, 600px) 1fr;
}
`;
const InfoImage = styled.img`
display: block;
width: 100%;
height: 100%;
object-fit: contain;
`;
const InfoTitle = styled.h1`
margin: 0;
font-weight: var(--fw-normal);
`;
const ListGroup = styled.div`
display: flex;
flex-direction: column;
gap: 2rem;
@media (min-width: 1024px) {
flex-direction: row;
gap: 4rem;
}
`;
const List = styled.ul`
list-style: none;
margin: 0;
padding: 0;
`;
const ListItem = styled.li`
line-height: 1.8;
& > b {
font-weight: var(--fw-bold);
}
`;
const Meta = styled.div`
margin-top: 3rem;
display: flex;
gap: 1.5rem;
flex-direction: column;
align-items: flex-start;
& > b {
font-weight: var(--fw-bold);
}
@media (min-width: 767px) {
flex-direction: row;
align-items: center;
}
` ;
const TagGroup = styled.div`
display: flex;
gap: 1rem;
flex-wrap: wrap;
`;
const Tag = styled.span`
padding: 0 1rem;
background-color: var(--colors-ui-base);
box-shadow: var(--shadow);
line-height: 1.5;
cursor: pointer;
`;
export const Info=(props)=>{
const {
name,
nativeName,
flag,
capital,
population,
region,
subregion,topLevelDomain,currencies=[],languages=[],borders=[],push,
}=props;
const [neighbors, setNeighbors] = useState([]);
useEffect(() => {
if (borders.length)
axios.get(filterByCode(borders))

.then(({ data }) => setNeighbors(data.map((c) => c.name)));
}, [borders]);
<Wrapper>
<div>
<InfoImage src={flag} alt={name}/>
<div>
<InfoTitle>{name}</InfoTitle>
</div>
<ListGroup>
<List>
<ListItem>
<b>Population:</b>{population}
</ListItem>
</List>
<List>
<ListItem>
<b>Region:</b>{region}
</ListItem>
</List>
<List>
<ListItem>
<b>Subregion:</b>{subregion}
</ListItem>
</List>
<List>
<ListItem>
<b>Capital:</b>{capital}
</ListItem>
</List>
<List>
<ListItem>
<b>Top Level Domain:</b>{topLevelDomain.map((d)=>(<span key={d}>{d} </span>))}
</ListItem>
</List>
<List>
<ListItem>
<b>Currencies:</b>{currencies.map((c)=>(<span key={c.code}>{c.name} </span>))}
</ListItem>
</List>
<List>
<ListItem>
<b>Languages:</b>{languages.map((l)=>(<span key={l.name}>{l.name} </span>))}
</ListItem>
</List>
</ListGroup>
<Meta>
<b>Border Countries</b>
{!borders.length ? (
<span>There is no border countries</span>
) : (
<TagGroup>
{neighbors.map((b) => (
<Tag key={b} onClick={() => push(`/country/${b}`)}>
{b}
</Tag>
))}
</TagGroup>
)}
</Meta>
</div>
</Wrapper>
};

Details.jsx

import axios from 'axios';
import { useState, useEffect } from 'react';
import { useNavigate, useParams } from 'react-router-dom';
import { IoArrowBack } from 'react-icons/io5';
import { searchByContry } from '../config';
import { Button } from '../components/Button';
import { Info } from '../components/Info';
export const Details = () => {
const { name } = useParams();
const navigate = useNavigate();
const [countries,setCountries]=useState(null);
useEffect(() => {
axios.get(searchByContry(name)).then(({ data})=>setCountries(data[0]));
},[name])
return (
<div>
<Button onClick={() => navigate(-1)}><IoArrowBack />Back</Button>
{countries && <Info {...countries} />}

</div>
);
}; 

Answer 1

您的Info组件中缺少return

你必须这样做

return(
<Wrapper>
<div>
<InfoImage src={flag} alt={name}/>
<div>
<InfoTitle>{name}</InfoTitle>
</div>
<ListGroup>
<List>
<ListItem>
<b>Population:</b>{population}
</ListItem>
</List>
<List>
<ListItem>
<b>Region:</b>{region}
</ListItem>
</List>
<List>
<ListItem>
<b>Subregion:</b>{subregion}
</ListItem>
</List>
<List>
<ListItem>
<b>Capital:</b>{capital}
</ListItem>
</List>
<List>
<ListItem>
<b>Top Level Domain:</b>{topLevelDomain.map((d)=>(<span key={d}>{d} </span>))}
</ListItem>
</List>
<List>
<ListItem>
<b>Currencies:</b>{currencies.map((c)=>(<span key={c.code}>{c.name} </span>))}
</ListItem>
</List>
<List>
<ListItem>
<b>Languages:</b>{languages.map((l)=>(<span key={l.name}>{l.name} </span>))}
</ListItem>
</List>
</ListGroup>
<Meta>
<b>Border Countries</b>
{!borders.length ? (
<span>There is no border countries</span>
) : (
<TagGroup>
{neighbors.map((b) => (
<Tag key={b} onClick={() => push(`/country/${b}`)}>
{b}
</Tag>
))}
</TagGroup>
)}
</Meta>
</div>
</Wrapper>
)

Answer 2

似乎你在这里缺少一个返回

export const Info=(props)=>{
...
return <Wrapper>
...
</Wrapper>
};