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。