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