如何从 Axios 获取数组数据并将其转换为字符串？

Question

我试图在我的 React 组件中显示一些数据，但有些数据我无法获取。

我可以获得任何其他简单数据，但我在获取数组中的数据时遇到了问题。

API 格式如下：

res.data
   genres: (3) [(...), (...), (...)]
      0: {name: 'Adventure'}
      1: {name: 'Fantasy'}
      1: {name: 'Sci-Fi'}

这是我的代码：

const [anime, setAnime] = useState([])
  const [random, setRandom] = useState(0)

  useEffect(() => {
    axios
      .get(`https://api.jikan.moe/v3/anime/${random}`)
      .then(res => {
        console.log(res.data)
        setAnime(res.data)
      })
      .catch(err => {
        randomAnime()
      })
    
  }, [random])

const randomAnime = () => {
   setRandom(1 + Math.floor(Math.random() * 100))
}

return (
   <Anime title={anime.title} genres={anime.genres} />
)
}

然后，我将 anime.genres 作为道具传递给另一个组件。 在那里，我尝试呈现以下内容：

genres.map((genre) =>   
   <span key={genre.name.toString()}>
      {genre.name}
   </span>
)

这个错误显示：

类型错误：无法读取未定义的属性（读取“地图”）

实际上，我要渲染的是以下字符串（这部分尚未实现，我想将所有数组项合并为一个字符串，以逗号分隔）：Adventure、Fantasy、Sci-Fi。

希望有人能帮助我，我整个中午都被击中了。 提前致谢。

问候

Answer 1

您可以通过在尝试 map 之前检查流派是否未定义来防止这种情况。

像这样：

{
 genres !== undefined &&
 genres.map((genre) =>   
    <span key={genre.name.toString()}>
       {genre.name}
    </span>
 )
}

如果你想用 a 显示数组中的项目，并将它们显示为字符串，你可以使用join()方法。

Answer 2

您可以通过在 props 中为 gener 添加默认数据来防止这种情况。 此外，如果“gener.name”已经是一个字符串，则不需要使用 .toString() 作为键，只需输入 gener.name 就足够了 如果您只需要包含字符串项的新数组，只需像这样创建他：const newArray = genres.map(g=> g.name)