JSON.stringify 在模板文字中的 map 方法中不起作用

Question

我正在尝试映射一些数据并显示我正在映射的对象的值，但它保持 return“[object Object]”，通常我只是将它包装在 JSON.stringify 但这在这里不起作用，我做错了什么？这是我的代码：

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>
  )
}

这是将 returned 的示例，代替 [object Object] 应该是我尝试访问的对象值：

响应数据示例：

{
    "Title": "Braveheart",
    "Year": "1995",
    "Rated": "R",
    "Released": "24 May 1995",
    "Runtime": "178 min",
    "Genre": "Biography, Drama, History, War",
    "Director": "Mel Gibson",
    "Writer": "Randall Wallace",
    "Actors": "James Robinson, Sean Lawlor, Sandy Nelson, James Cosmo",
    "Plot": "Scottish warrior William Wallace leads his countrymen in a rebellion to free his homeland from the tyranny of King Edward I of England.",
    "Language": "English, French, Latin, Scottish Gaelic, Italian",
    "Country": "USA",
    "Awards": "Won 5 Oscars. Another 28 wins & 33 nominations.",
    "Poster": "https://m.media-amazon.com/images/M/MV5BMzkzMmU0YTYtOWM3My00YzBmLWI0YzctOGYyNTkwMWE5MTJkXkEyXkFqcGdeQXVyNzkwMjQ5NzM@._V1_SX300.jpg",
    "Ratings": [{
        "Source": "Internet Movie Database",
        "Value": "8.3/10"
    }, {
        "Source": "Rotten Tomatoes",
        "Value": "78%"
    }, {
        "Source": "Metacritic",
        "Value": "68/100"
    }],
    "Metascore": "68",
    "imdbRating": "8.3",
    "imdbVotes": "944,923",
    "imdbID": "tt0112573",
    "Type": "movie",
    "DVD": "N/A",
    "BoxOffice": "N/A",
    "Production": "Icon Entertainment International, Twentieth Century Fox, Ladd Company, Paramount Pictures, B.H. Finance C.V.",
    "Website": "N/A",
    "Response": "True"
}

Answer 1

我认为问题出在这里，

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 ReactElements（又名对象）。但是，然后你直接将它们传递给字符串。这导致 [object object] 事情

#2:

评级对象，

"Ratings": [{
        "Source": "Internet Movie Database",
        "Value": "8.3/10"
    }, {
        "Source": "Rotten Tomatoes",
        "Value": "78%"
    }, {
        "Source": "Metacritic",
        "Value": "68/100"
    }],

这里，Rating 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。

JSON.stringify 在模板文字中的 map 方法中不起作用

JSON.stringify not working in my map method in template literals

javascript

object

typescript

reactjs

template-literals

#1：（主要）

#2:

我的解决方案，