如何在 React JS 中构建重置按钮？ [关闭]答案

【问题标题】：How can I build a reset Button in React JS? [closed]如何在 React JS 中构建重置按钮？ [关闭]
【发布时间】：2021-10-22 21:32:49
【问题描述】：

我目前正在学习如何访问 API 数据并使用 React 构建了一个应用程序，该应用程序会生成随机的辛普森一家报价。

我想构建一个重置函数，实际上，当单击按钮时，它会从 API 重新加载数据，但我无法让它工作（我不断收到“无法访问属性”重新加载时出现“地图”错误）。

我已经尝试了很多不同的代码排列方式，但似乎都无法做到正确。请问有什么想法吗？

import axios from 'axios'
import CharacterCard from './CharacterCard'

import './CharacterList.css'

const CharacterList = () => {
  const [characters, setCharacters] = useState([])

  useEffect(() => {
    async function getCharactersFromApi() {
      const response = await axios.get(
        'https://thesimpsonsquoteapi.glitch.me/quotes?count=100'
      )
      setCharacters(response.data)
    }
    getCharactersFromApi()
  }, [])

  const reset = () => {
    setCharacters('')
  }

  return (
    <>
      <div className='CharacterList'>
        {characters.map((character) => (
          <CharacterCard {...character} />
        ))}
      </div>
      <button onClick={reset}>New Quotes?</button>
    </>
  )
}

export default CharacterList```

【问题讨论】：

原始状态是一个数组，所以重置回那个，即setCharacters([])而不是setCharacters('')。字符串没有 .map 属性。投票结束为“不可复制或由错字引起”。干杯。

标签： reactjs reset

【解决方案1】：

在重置函数中，您将字符设置为字符串，因此当您对空字符串执行映射时会产生此错误，因此请改为将其设置为 const reset = () => { setCharacters([]) } 以将其重置为数组

【讨论】：

非常感谢侯赛因的回复！