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

【问题标题】：How can I get array data from Axios to convert it to string?如何从 Axios 获取数组数据以将其转换为字符串？
【发布时间】：2021-11-20 18:30:12
【问题描述】：

我试图在我的 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>
)

这个错误显示：

TypeError: Cannot read properties of undefined (reading 'map')

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

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

问候

【问题讨论】：

看起来 genre 可能是空的/未定义的。您可能希望对此进行异常处理。

标签： javascript arrays reactjs axios

【解决方案1】：

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

类似这样的：

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

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

【讨论】：

【解决方案2】：

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

【讨论】：