在 React 中使用 map() 時無法從 API 調用訪問數組數據

Question

我正在嘗試對從 API 調用收到的數據進行 map。 獲得淺端點工作正常，但任何嵌套的東西都會給我一個錯誤。

目標是獲取所有開場主題並將它們顯示在“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>
  )
}

Answer 1

您的初始 state 是一個空數組，而不是一個空 object：

const initialState = {
  anime: []
}

當您的組件安裝時，還沒有數據，因此您嘗試渲染[].opening_themes.map ，顯然空數組上沒有opening_themes屬性。

將您的初始 state 設置為空 object ：

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 state 包含mal_id屬性。

Answer 2

第一次渲染組件時，state anime等於{anime: []} ，它沒有名為opening_themes的屬性。

Answer 3

你應該這樣嘗試

首先，刪除 initialState 代碼並使用如下直接代碼

如果響應是數組的形式

const [anime, setAnime] = useState([])

如果響應是 object 的形式

const [anime, setAnime] = useState({})

否則，null 將適用於任何響應

const [anime, setAnime] = useState(null)

像這樣的返回碼

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

Answer 4

像這樣更改 initialState 以避免未定義。

  const initialState = {
    anime: {
      opening_themes:[]
    }
  }