Javascript characters.map不是一个函数_Javascript_Reactjs

Javascript characters.map不是一个函数

javascript reactjs

Javascript characters.map不是一个函数,javascript,reactjs,Javascript,Reactjs,我在映射这些数据时遇到了问题。我已经读到数据类型可能是错误的，但是我已经进入Js十天了。我不太确定 const App = () => { const [characters, setCharacters] = useState([]) const [isLoading, setIsLoading] = useState(true) const [query, setQuery] = useState('') useEffect(() => { const

我在映射这些数据时遇到了问题。我已经读到数据类型可能是错误的，但是我已经进入Js十天了。我不太确定

const App = () => {
  const [characters, setCharacters] = useState([])
  const [isLoading, setIsLoading] = useState(true)
  const [query, setQuery] = useState('')

  useEffect(() => {
    const fetchCharacters = async () => {
      const result = await axios(`https://api.got.show/api/show/characters/${query}`)

      setCharacters(result.data)
      setIsLoading(false)
    }

    fetchCharacters();
  }, [query])

  return <div className="container">
    <Header />
    <Search getQuery={(q) => setQuery(q)}/>
    <CharacterGrid isLoading={isLoading} characters={characters}/>
  </div>

}

const CharacterGrid = ({ characters, isLoading }) => {
    return isLoading ? (
        <Spinner />) : (
        <section className="cards">
        {characters.map(character => (
            <CharacterItem key={character.id} character={character}></CharacterItem>
        ))}
    </section>)
}

const-App=（）=>{
常量[characters，setCharacters]=useState（[]）
常量[isLoading，setIsLoading]=useState（真）
const[query，setQuery]=useState（“”）
useffect（（）=>{
const fetchCharacters=async（）=>{
常量结果=等待axios(`https://api.got.show/api/show/characters/${query}`）
设置字符（result.data）
setIsLoading（错误）
}
fetchCharacters（）；
}，[查询]）
返回
setQuery（q）}/>
}
常量CharacterGrid=（{字符，isLoading}）=>{
返回卸载(
) : (
{characters.map（character=>(
))}
)
}

由于results.data未定义，您可以添加一个检查以防止状态更新。即使字符数组未定义，此检查至少允许应用程序工作。下面编写的代码片段将显示一个加载屏幕。因此，我通过将setIsLoading保持在条件之外来禁用它。必须确保已从API返回字符，以便CharacterGrid组件与列表一起呈现。您还可以通过在API调用后执行控制台来检查API响应返回的结果是否正确

const App = () => {
  const [characters, setCharacters] = useState([])
  const [isLoading, setIsLoading] = useState(true)
  const [query, setQuery] = useState('')

  useEffect(() => {
    const fetchCharacters = async () => {
      const result = await axios(`https://api.got.show/api/show/characters/${query}`);
      console.log('result',result);
      if(result && result.data) {
          setCharacters(result.data)
      }
      setIsLoading(false)
    }

    fetchCharacters();
  }, [query])

  return <div className="container">
    <Header />
    <Search getQuery={(q) => setQuery(q)}/>
    <CharacterGrid isLoading={isLoading} characters={characters}/>
  </div>

}

const CharacterGrid = ({ characters, isLoading }) => {
    return isLoading ? (
        <Spinner />) : (
        <section className="cards">
        {characters && characters.map(character => (
            <CharacterItem key={character.id} character={character}></CharacterItem>
        ))}
    </section>)
}

const-App=（）=>{
常量[characters，setCharacters]=useState（[]）
常量[isLoading，setIsLoading]=useState（真）
const[query，setQuery]=useState（“”）
useffect（（）=>{
const fetchCharacters=async（）=>{
常量结果=等待axios(`https://api.got.show/api/show/characters/${query}`）；
console.log（'result'，result）；
if（结果和结果数据）{
设置字符（result.data）
}
setIsLoading（错误）
}
fetchCharacters（）；
}，[查询]）
返回
setQuery（q）}/>
}
常量CharacterGrid=（{字符，isLoading}）=>{
返回卸载(
) : (
{characters&&characters.map（character=>(
))}
)
}

const App = () => {
  const [characters, setCharacters] = useState([])
  const [isLoading, setIsLoading] = useState(true)
  const [query, setQuery] = useState('')

  useEffect(() => {
    const fetchCharacters = async () => {
      const result = await axios(`https://api.got.show/api/show/characters/${query}`);
      console.log('result',result);
      if(result && result.data) {
          setCharacters(result.data)
      }
      setIsLoading(false)
    }

    fetchCharacters();
  }, [query])

  return <div className="container">
    <Header />
    <Search getQuery={(q) => setQuery(q)}/>
    <CharacterGrid isLoading={isLoading} characters={characters}/>
  </div>

}

const CharacterGrid = ({ characters, isLoading }) => {
    return isLoading ? (
        <Spinner />) : (
        <section className="cards">
        {characters && characters.map(character => (
            <CharacterItem key={character.id} character={character}></CharacterItem>
        ))}
    </section>)
}

const-App=（）=>{
常量[characters，setCharacters]=useState（[]）
常量[isLoading，setIsLoading]=useState（真）
const[query，setQuery]=useState（“”）
useffect（（）=>{
const fetchCharacters=async（）=>{
常量结果=等待axios(`https://api.got.show/api/show/characters/${query}`）；
console.log（'result'，result）；
if（结果和结果数据）{
设置字符（result.data）
}
setIsLoading（错误）
}
fetchCharacters（）；
}，[查询]）
返回
setQuery（q）}/>
}
常量CharacterGrid=（{字符，isLoading}）=>{
返回卸载(
) : (
{characters&&characters.map（character=>(
))}
)
}

什么是

字符

数据类型？字符不是数组。肯定在返回行之前，添加

console.log（字符）

，并让我们知道您看到了什么。但它不是一个数组！我们需要更多的代码来帮助您，比如您正在创建作为角色道具传递的变量的地方instance@Nih.ilus是的，但这不是你想要的类型。请输入该日志以查看.@Nih.ilus，可能最初您已将字符设置为数组数据类型，但fetchCharacters（）已被object覆盖。我们必须看到api给出的响应。它是否返回数组。什么是

字符

数据类型？字符不是数组。肯定在返回行之前，添加

console.log（字符）