TypeError：无法读取未定义的属性“地图”错误

Question

我想制作一个测验网络应用程序，每当我在其中添加地图功能时QuestionBox.js都会出错。

有没有人有这个问题的解决方案？

错误 ：

   4 | const [answer, setAnswer] = useState(options);

   5 | return (

   6 |   <div className="questionBox">

>  7 |     <div className="question">{question}</div>

     | ^   8 |     {answer.map((text, index) => (

   9 |       <button

  10 |         key={index}

代码QuestionBox.js：

import React, {useState} from "react";

const QuestionBox = ({question, options, selected}) => {

  const [answer, setAnswer] = useState(options);

  return (

    <div className="questionBox">

      <div className="question">{question}</div>

      {answer.map((text, index) => (

        <button

          key={index}

          className="answerBtn"

          onClick={() => {

            setAnswer([text]);

            selected(text);

          }}

        >

          {text}

        </button>

      ))}

    </div>

  );

};

export default QuestionBox;

Answer 1

{this.state.questionBank.length > 0 && this.state.questionBank.map( ({question,answer,correct,questionId}) => ( ) ) } –这里的答案应该是 QuizService 中定义的答案这是正确的 QuestionBox 道具{this.state.questionBank.length > 0 && this.state.questionBank.map( ({question,answers,correct,questionId}) => ( ) ) } –

Answer 2

我收到此错误是因为在渲染options时未定义。QuestionBox你应该试试这个：import React, {useState} from "react";const QuestionBox = ({question, options = [], selected}) => {&nbsp; const [answer, setAnswer] = useState(options);&nbsp; return (&nbsp; &nbsp; <div className="questionBox">&nbsp; &nbsp; &nbsp; <div className="question">{question}</div>&nbsp; &nbsp; &nbsp; {answer && answer.map((text, index) => (&nbsp; &nbsp; &nbsp; &nbsp; <button&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; key={index}&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; className="answerBtn"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; onClick={() => {&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; setAnswer([text]);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; selected(text);&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; }}&nbsp; &nbsp; &nbsp; &nbsp; >&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; {text}&nbsp; &nbsp; &nbsp; &nbsp; </button>&nbsp; &nbsp; &nbsp; ))}&nbsp; &nbsp; </div>&nbsp; );};export default QuestionBox;

Answer 3

将默认空数组分配给question参数。它将第一次解决可能未定义的问题。