开发者问题收集

TypeError:无法读取未定义的 Reactjs 的属性“map”?

2020-07-29
397

TypeError:无法读取未定义的 Reactjs 属性“map”?

我正在运行小型测验模块,但显示以下错误,请帮助我解决以下错误 TypeError:无法读取未定义的属性“map” 我不知道如何解决我是 React 新手,请帮助我解决此代码

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();

Questionlist.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

Question.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
2个回答

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

如果由于 Quiz 组件中有数组(问题)而没有用处,请尝试删除 Garage 组件。将问题从 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'));
akhtarvahid
2020-07-29

对于 Questionlist,您的问题未通过,应该是:

 <Questionlist questions={this.state.questions} />
Asutosh
2020-07-29