我有以下组件:
import React, { Component } from 'react';
import Utilities from './utilities.js';
import Action from './action.jsx';
import SingleGridEl from './singleGridEl.jsx';
class Grid extends Component {
constructor(props) {
super(props);
this.question;
this.maxN = 110;
this.array = [];
this.state = {
n1: false,
n2: false,
n3: false,
n4: false,
n5: false,
n6: false,
n7: false,
n8: false,
n9: false,
n10: false,
n11: false,
n12: false,
n13: false,
n14: false,
n15: false,
n16: false,
n17: false,
n18: false,
n19: false,
n20: false,
n21: false,
n22: false,
n23: false,
n24: false
}
this.hideSingleGrid = this.hideSingleGrid.bind(this);
}
getRandomQuestion() {
let randomN = Utilities.generateRandomNumber(this.array, this.maxN);
console.log(randomN);
this.question = this.props.current.data.questions[randomN];
console.log(this.question);
return this.question;
}
hideSingleGrid(el, val) {
var s = {};
s[el] = val;
this.setState(s);
}
componentWillMount() {
this.getRandomQuestion();
}
render() {
return (
<section className="game">
<div className="grid">
<div className="row">
<SingleGridEl visibility={this.state.n1} />
<SingleGridEl visibility={this.state.n2} />
<SingleGridEl visibility={this.state.n3} />
<SingleGridEl visibility={this.state.n4} />
<SingleGridEl visibility={this.state.n5} />
<SingleGridEl visibility={this.state.n6} />
</div>
<div className="row">
<SingleGridEl visibility={this.state.n7} />
<SingleGridEl visibility={this.state.n8} />
<SingleGridEl visibility={this.state.n9} />
<SingleGridEl visibility={this.state.n10} />
<SingleGridEl visibility={this.state.n11} />
<SingleGridEl visibility={this.state.n12} />
</div>
<div className="row">
<SingleGridEl visibility={this.state.n13} />
<SingleGridEl visibility={this.state.n14} />
<SingleGridEl visibility={this.state.n15} />
<SingleGridEl visibility={this.state.n16} />
<SingleGridEl visibility={this.state.n17} />
<SingleGridEl visibility={this.state.n18} />
</div>
<div className="row">
<SingleGridEl visibility={this.state.n19} />
<SingleGridEl visibility={this.state.n20} />
<SingleGridEl visibility={this.state.n21} />
<SingleGridEl visibility={this.state.n22} />
<SingleGridEl visibility={this.state.n23} />
<SingleGridEl visibility={this.state.n24} />
</div>
</div>
<Action t={this.hideSingleGrid} question={this.question} getRandomQuestion={this.getRandomQuestion.bind(this)}/>
</section>
);
}
}
export default Grid;
使用实用方法:
var Utilities = (function (array, maxN) {
function generateRandomNumber(array, maxN) {
let randomN = Math.floor((Math.random() * maxN) + 1);
if(array.indexOf(randomN) === -1) {
array.push(randomN);
}
else {
randomN = generateRandomNumber();
}
console.log(array);
return randomN;
}
return {
generateRandomNumber: generateRandomNumber
};
})();
export default Utilities;
此实用程序方法生成一个随机数并将其存储在一个数组中,以便根据传入的最大长度返回的每个随机数都是唯一的。
action.jsx组件使用相同的实用方法:
import React, { Component } from 'react';
import Utilities from './utilities.js';
class Action extends Component {
constructor(props) {
super(props);
this.maxN = 24;
this.array = [];
this.state = {
question: props.question
}
}
getNewQuestion(e) {
let answerId = "option_" + this.state.question.correct_option;
if(e.target.getAttribute('data-question') == answerId) {
let randomNumber = Utilities.generateRandomNumber(this.array, this.maxN);
this.props.t('n'+randomNumber, true);
this.setState({
question: this.props.getRandomQuestion()
});
}
else {
console.log('wrong');
}
}
render() {
let state = this.state;
return(
<div className="action">
<div className="action-question">
<h3>{state.question.question}</h3>
</div>
<div className="action-answers">
<p data-question="option_1" onClick={this.getNewQuestion.bind(this)}>{state.question.option_1}</p>
<p data-question="option_2" onClick={this.getNewQuestion.bind(this)}>{state.question.option_2}</p>
<p data-question="option_3" onClick={this.getNewQuestion.bind(this)}>{state.question.option_3}</p>
<p data-question="option_4" onClick={this.getNewQuestion.bind(this)}>{state.question.option_4}</p>
</div>
</div>
);
}
}
export default Action;
当我点击每个&#34; p&#34;时,&#34; this.getNewQuestion&#34;检查我们是否点击了正确的答案并转到下一个问题并提供相关答案。
在游戏中的某些时候(非常随机),我在控制台中收到以下错误。错误是指实用方法:
if(array.indexOf(randomN) === -1) {
我无法弄清楚导致该错误的原因。
答案 0 :(得分:2)
在您呼叫array
之前,您需要检查您的indexOf
参数实际上是否为数组:
if(Array.isArray(array) && array.indexOf(randomN) === -1) {
}
或提供默认参数
function generateRandomNumber(array = [], maxN) {
代码中的这一行是在没有任何参数的情况下调用函数并触发错误:
else {
randomN = generateRandomNumber();
}
答案 1 :(得分:0)
我认为你在没有任何参数的情况下递归调用它,因此array
变量未定义。
var Utilities = (function (array, maxN) {
function generateRandomNumber(array, maxN) {
let randomN = Math.floor((Math.random() * maxN) + 1);
if(array.indexOf(randomN) === -1) {
array.push(randomN);
}
else {
randomN = generateRandomNumber(array, maxN);
}
return randomN;
}
return {
generateRandomNumber: generateRandomNumber
};
})();
&#13;