时间戳

首页 > 解决方案 > 在 React 中使用 map() 时无法通过 API 调用访问数组数据

javascript - 在 React 中使用 map() 时无法通过 API 调用访问数组数据

问题描述

我正在尝试映射从 API 调用收到的数据。获得浅端点工作正常，但任何嵌套的东西都会给我一个错误。

目标是获取所有开场主题并将它们显示在“ul”中。

确切的错误“TypeError：anime.opening_themes 未定义”

回购项目

这是端点。

在此处输入图像描述

这是我的组件。

const AnimeDetails = (props) => {
  const API = 'https://api.jikan.moe/v3/anime'

  const initialState = {
    anime: []
  }

  const [anime, setAnime] = useState(initialState)

  useEffect(() => {
    const getAnime = async () => {
      const response = await fetch(`${API}/${props.match.params.animeId}`)
      const data = await response.json()

      console.log(data);
      setAnime(data) // set initial state to hold data from our API call
    }
    getAnime()
  }, []) // [] prevents useEffect from running in an infinite loop

  return (
    <AnimeDetailsWrapper>
      <Title>{anime.title}</Title>
      <Details>
        {anime.opening_themes
          .map((song, index) => (
            <li key={index}>{song}</li>
          ))}
      </Details>
    </AnimeDetailsWrapper>
  )
}

标签： javascriptarraysreactjs

解决方案

您的初始状态是一个空数组，而不是一个空对象：

const initialState = {
  anime: []
}

当你的组件挂载时，还没有数据，所以你试图渲染，显然空数组上[].opening_themes.map没有属性。opening_themes

将您的初始状态设置为空对象：

const initialState = {}

您可能希望在尝试呈现数据之前测试您是否拥有数据：

return anime.mal_id && (
    <AnimeDetailsWrapper>
      <Title>{anime.title}</Title>
      <Details>
        {anime.opening_themes
          .map((song, index) => (
            <li key={index}>{song}</li>
          ))}
      </Details>
    </AnimeDetailsWrapper>
  )

这将阻止您的组件呈现任何内容，直到您的anime状态包含mal_id属性。

推荐阅读