javascript - data.map 不是一个函数 React

Question

经过几个小时的尝试更正代码后，我来到这里寻求帮助。 这个想法是搜索一个 Angular 色并显示我选择的一些细节，现在 我根本无法解决这个问题，我尝试迭代死亡数组并从那里收集一些信息:

我正在使用此 API:https://tibiadata.com/doc-api-v2/characters/

   import React ,{useEffect,useState}from 'react'
    import './App.css';
    import SearchCharacter from './SearchCharacter'
    import Death from './Death'

    function App() {

    const [currentPlayer,setCurrentPlayer] =useState([])
    const [playerDeath,setPlayerDeath] =useState([])
    const [search,setSearch] = useState("")
    const [query,setQuery] = useState('')

    const BASE_URL = `https://api.tibiadata.com/v2/characters/${query}.json`
    useEffect(() => {

      fetch(BASE_URL)
      .then(res =>res.json())
      .then(data=>{
        setCurrentPlayer(data.characters.data,...Object.keys(data.characters.data))
        setPlayerDeath(...data.characters.deaths,...Object.keys(data.characters.deaths))
      })
    }, [query])

    const updateSearch = e=>{
      setSearch(e.target.value)
    }

    const getSearch =e =>{
      e.preventDefault();
      setQuery(search)
      setSearch('')
    }

     return (
      <div>
          <h1>Tibia </h1>
          <form onSubmit ={getSearch}>
            <input placeholder="Enter Name" input ={search} onChange ={updateSearch}/>
            <button >Search</button>
          </form>
          <SearchCharacter currentPlayer ={currentPlayer}/>
          {playerDeath.map(death =>(<Death
              key = {death.death.reason} 
              reason = {death.death.reason}
              level = {death.death.level}
          />))}
       </div>

      )
     }

    export default App

死亡组件:

import React from 'react'

 const Death =({reason,level}) =>{
    return (
        <div>
            <p>Player Death: Played died by {reason} at level : {level}</p>
        </div>
    )
}

export default Death;

搜索字符组件:

import React from 'react'

const SearchCharacter =({currentPlayer}) =>{
    return (
        <div>
            <p>Player Name :{currentPlayer.name}</p>
            <p>Player Level :{currentPlayer.level}</p>
            <p>Player Vocation :{currentPlayer.vocation}</p>
        </div>
    )
}


export default SearchCharacter

我基本上想做的是将 Angular 色的所有死亡都显示在“玩家死亡”下，但无论我尝试的代码有什么变化，我都会继续遇到相同的错误:

data.map 不是一个函数 - 我已经尝试将其他解决方案适应我的代码，但我无法让它看起来起作用。 在某些时候我可以显示一个死亡，如果没有死亡 - 代码就会崩溃。

现在，在反复使用我的代码之后，它甚至不会显示 Death 组件 jsx 。

任何帮助将不胜感激!

Answer 1

更改setPlayerDeath(...data.characters.deaths,...Object.keys(data.characters.deaths))

到setPlayerDeath([...data.characters.deaths,...Object.keys(data.characters.deaths)])

实际上，当您想要 setPlayerDeath([v1, v2, v3, v4, . ..等])