如何解决JSON.stringify在模板文字中的map方法中不起作用 #1 :主要#2:我的解决方案,
我试图映射一些数据并显示映射对象中的值,但它始终返回“ [object Object]”,通常我只是将其包装在JSON.stringify中,但这在这里不起作用, 我究竟做错了什么?这是我的代码:
class IdentificatedGeneric<S> extends Array<S> {
public id: string; // Enhancement of Array class
public constructor(id: string) {
super();
this.id = id;
}
}
function concatenate<S,T1 extends IdentificatedGeneric<S>>(list1: T1,list2: T1): T1 {
if (list1.id === list2.id) { // Comparison to ensure from the same id,possible because both extends IdentificatedGeneric
const oneList = [...list1,...list2] as T1;
return oneList;
}
throw Error("Must be the same id");
}
const l1 = new IdentificatedGeneric<string>("l1");
const l2 = new IdentificatedGeneric<string>("l2");
const l3 = new IdentificatedGeneric<number>("l1");
const l4 = new IdentificatedGeneric<string>("l1");
l1.push("1","2");
l2.push("100","200");
l3.push(5,6);
l4.push("500","600");
const c3 = concatenate(l1,l4);
console.log(c3);
这是将返回什么的示例,代替[object Object]应该是我尝试访问的对象值: almost always on MacOS
响应数据示例:
const ListingItem = (props: any) => {
const MOVIE_POSTER_API_URL = "https://image.tmdb.org/t/p/w92/";
const [openMovieDbData,setOpenMovieDbData] = useState<Array<any>>([]);
const [openMovieDbRatings,setOpenMovieDbRatings] = useState([]);
useEffect((): any => {
axios.get(`http://www.omdbapi.com/?t=${props.movie.title}&y=${props.movie.release_date && props.movie.release_date.substr(0,4)}&apikey=${process.env.REACT_APP_OPEN_MOVIE_API_KEY}`)
.then(response => {
setOpenMovieDbData(response.data);
setOpenMovieDbRatings(response.data.Ratings);
})
.catch((error) => console.log('Open Movie DB HTTP GET Request Error response:',error))
},[])
return (
<ListItem key={props.movie.id}>
{props.movie.backdrop_path ?
<ListItemAvatar>
<Avatar src={MOVIE_POSTER_API_URL + props.movie.backdrop_path} />
</ListItemAvatar> :
<ListItemIcon>
<Avatar>
<LocalMoviesIcon />
</Avatar>
</ListItemIcon>
}
<ListItemText
primary={props.movie.title}
secondary={`${props.movie.overview} Released in ${props.movie.release_date ? props.movie.release_date.substr(0,4) : 'N/A'}
${openMovieDbRatings ? openMovieDbRatings.map((rating: any) => <div>{JSON.stringify(rating.Source)}: {JSON.stringify(rating.Value)}</div>) : 'No Reviews'}
Rated: ${openMovieDbData['Rated'] ? openMovieDbData['Rated'] : 'N/A'}
`
}
/>
</ListItem>
)
}
解决方法
我认为问题出在这里,
secondary={`${props.movie.overview} Released in ${props.movie.release_date ? props.movie.release_date.substr(0,4) : 'N/A'}
${openMovieDbRatings ? openMovieDbRatings.map((rating: any) => <div>{JSON.stringify(rating.Source)}: {JSON.stringify(rating.Value)}</div>) : 'No Reviews'}
Rated: ${openMovieDbData['Rated'] ? openMovieDbData['Rated'] : 'N/A'}
`}
#1 :(主要)
${openMovieDbRatings
? openMovieDbRatings.map((rating: any) =>
<div>{JSON.stringify(rating.Source)}: {JSON.stringify(rating.Value)}</div>
)
: 'No Reviews'}
您正在映射openMovieDbRatings
并通过将它们包装在div中来制作em ReactElement(又称对象)。但是,然后您直接将它们传递给字符串。这是[object object]
的原因
#2:
评级对象
"Ratings": [{
"Source": "Internet Movie Database","Value": "8.3/10"
},{
"Source": "Rotten Tomatoes","Value": "78%"
},{
"Source": "Metacritic","Value": "68/100"
}],
在这里,等级Value
和Source
是字符串。因此,不必JSON.stringify
他们
<div>{JSON.stringify(rating.Source)}: {JSON.stringify(rating.Value)}</div>
我的解决方案,
<ListItemText
primary={props.movie.title}
secondary={
<>
{props.movie.overview} Released in{' '}
{props.movie.release_date
? props.movie.release_date.substr(0,4)
: 'N/A'}{' '}
{openMovieDbRatings
? openMovieDbRatings.map((rating: any) => (
<div>
{rating.Source}: {rating.Value}
</div>
))
: 'No Reviews'}
Rated:{' '}
{openMovieDbData['Rated'] ? openMovieDbData['Rated'] : 'N/A'}
</>
}
/>
只需使用React.Fragments
。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。