javascript - TypeError：无法读取未定义 Reactjs 的属性“地图”？

Question

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

我正在使用小测验模块，但显示以下错误，请帮助我解决以下错误 TypeError: Cannot read property 'map' of undefined 我不知道如何解决我是新手，请帮助我获取此代码

index.js

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import Questionlist from './quiz/Questionlist.jsx';
import * as serviceWorker from './serviceWorker';

class Quiz extends React.Component {
    constructor(props){
        super(props);
            this.state= {
                questions : [
                    {
                        id: 1,
                        text: 'What is your name?',
                        choices:[
                            {
                                id: 'a',
                                text: 'Michael'
                            },
                            {
                                id: 'b',
                                text: 'Brand'
                            },
                            {
                                id: 'c',
                                text: 'Steven'
                            },
                        ],
                        correct: 'b'
                    },
                    {
                        id: 2,
                        text: 'What is your mother name?',
                        choices:[
                            {
                                id: 'a',
                                text: 'Sara'
                            },
                            {
                                id: 'b',
                                text: 'Denny'
                            },
                            {
                                id: 'c',
                                text: 'senny'
                            },
                        ],
                        correct: 'c'
                    },
                    {
                        id: 3,
                        text: 'What is your father name?',
                        choices:[
                            {
                                id: 'a',
                                text: 'Bobby'
                            },
                            {
                                id: 'b',
                                text: 'Harry'
                            },
                            {
                                id: 'c',
                                text: 'Waye'
                            },
                        ],
                        correct: 'c'
                    },
                    {
                        id: 4,
                        text: 'What is your friend name?',
                        choices:[
                            {
                                id: 'a',
                                text: 'John'
                            },
                            {
                                id: 'b',
                                text: 'Paul'
                            },
                            {
                                id: 'c',
                                text: 'Jose'
                            },
                        ],
                        correct: 'a'
                    },
                ],
                score: 0,
                current: 1
            }
    }

    render() {
        return <h2>I am a Car!</h2>;
    }
}

class Garage extends React.Component {
  render() {
    return (
      <div>
        <Questionlist />
      </div>
    );
  }
}

ReactDOM.render(<Garage />, document.getElementById('root'));
serviceWorker.unregister();

问题列表.jsx

import React from 'react';
import ReactDOM from 'react-dom';
import Question from './Question.jsx';

class Questionlist extends React.Component {

    render() {
        return(
            <div className="question">
                {
                    this.props.questions.map(questions => {
                        return <Question questions={questions} key={questions.id} {...this.props}  />
                    })
                }
            </div>
        )
    }
}

export default Questionlist

问题.jsx

import React from 'react';
import ReactDOM from 'react-dom';

class Question extends React.Component {

    render() {
        const {question} = this.props;
        return(
            <div className="well">
                <h3>{question.text}</h3>
                <hr />
                <ul className="list-group">
                    {
                        this.props.question.choices.map(choice =>{
                            return(
                                <li className="list-group-item">
                                    {choice.id} <input type="radio" onChange={this.onChange.bind(this)} name={question.id} value={choice.id} /> {choice.text}
                                </li>
                            )
                        })
                    }
                </ul>
            </div>
        )
    }
}

export default Question

标签： javascriptreactjs

Answer 1

将您的数组传递给Questionlist组件。

如果没有用，请尝试删除您的Garage组件，因为 Quiz 组件中有数组（问题）。将问题从 Quiz 组件传递到Questionlist组件。

代替

render() {
    return <h2>I am a Car!</h2>;
    }

像这样通过

render() {
    return <Questionlist questions={this.state.questions} />
    }

最后将根组件从Garage更改为Quiz

ReactDOM.render(<Quiz />, document.getElementById('root'));