quiz.map是不可迭代的- React

Question

我正在做一个自我项目-一个小测验应用程序。

它从一个api中获取随机字符串，该api生成一个由5个问题组成的随机对象，包括正确答案和错误答案等。

function App() {
  const [quiz, setQuiz] = React.useState({});
  const [resetGame, setNewGame] = React.useState(false);
  const [showStartMenu, setStartMenu] = React.useState(true);

  const toggleMenu = () => {
    setStartMenu(!showStartMenu)
  }

  function getQuizDetails(){
  fetch(`https://opentdb.com/api.php?amount=5&category=9`)
    .then(res => res.json())
    .then(data => setQuiz(data["results"]))
  }

  React.useEffect(() => {
    getQuizDetails();
  }, [resetGame])

  //const quizJson = JSON.stringify(quiz, null, 0);
  const questions = quiz.map(x => x);



  return (
    <main>

      {!showStartMenu && <button onClick={toggleMenu}>Main Menu (For debug purposes only) </button>}
      {showStartMenu && <Start toggleMenu={toggleMenu} />}
      {!showStartMenu && <pre>{JSON.stringify(questions, null, 2)}</pre>}

    </main>
  );
}

export default App;

但出于某种原因，当我试图映射对象时，它不起作用，而是返回一个错误

 Uncaught TypeError: quiz.map is not a function
    at App (App.jsx:26:26)

有办法解决这个问题吗？我想要帮助，而不是指向某些文章或类似的som1。

注意：-当我没有映射或做任何事情而只是将refer映射到quiz状态时，它就能正常工作。但是我需要找到一种方法来访问这些东西，比如问题，答案等等，所以是的。

如果您需要查看完整的源代码，以下是repl.it链接。问答应用程序- Replit

我匆匆忙忙地打了这个字，所以请随便问一下我应该详细说明什么。

我发现了一些有趣的东西

当我这么做

  const questions = quiz.map(x => x);

地图看起来很管用。

然而，当我尝试

  const questions = quiz.map(x => {
    return <Quiz questions={x["question"]} />
  });

它返回错误。

Answer 1

.map()用于数组。但是quiz不是数组，它是一个空对象：

const [quiz, setQuiz] = React.useState({});

稍后，您可以在获取数据后将其设置为数组。但它的初始状态是一个对象。如果您希望该状态成为数组，则将其设置为数组：

const [quiz, setQuiz] = React.useState([]);

Answer 2

因为您将测试初始状态设置为Object：{}，而将其设置为Array：[]

从…

const [quiz, setQuiz] = React.useState({});

至

const [quiz, setQuiz] = React.useState([]);