时间戳

首页 > 解决方案 > data.map 不是函数反应

javascript - data.map 不是函数反应

问题描述

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

我正在使用这个 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

我基本上想要做的是让一个角色的所有死亡都出现在“玩家死亡”下，但无论我尝试的代码有什么变化，我都会继续遇到同样的错误：

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

现在在我的代码玩了很多之后，它甚至不会显示 Death 组件 jsx 。

任何帮助将不胜感激！

标签： javascriptreactjs

解决方案

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

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

就像你本质上在做的那样setPlayerDeath(v1, v2, v3, v4, ...etc)，当你想要的时候setPlayerDeath([v1, v2, v3, v4, ...etc])

推荐阅读