问题：
ReactJS:Uncaught ReferenceError:[变量]未定义
丌官哲彦
我是Reactjs新手，对未定义的变量有问题。在控制台日志中，我从以下React页面获得“未捕获引用错误：drawResults未定义app.js:116002”：
import React, { Component } from "react";
import ReactDOM from "react-dom";
import { render } from 'react-dom';
import '@fortawesome/fontawesome-free/css/all.min.css';
import "bootstrap-css-only/css/bootstrap.min.css";
import "mdbreact/dist/css/mdb.css";
import { NumberPicker } from 'react-widgets';
import NumberPicker from 'react-widgets/lib/NumberPicker'
import PropTypes from "prop-types";
import Radium, {Style} from 'radium';
import { MDBBtn, MDBInput, MDBModal, MDBModalBody, MDBModalHeader, MDBModalFooter, MDBIcon,
MDBBadge, MDBContainer, MDBRow, MDBCol, MDBSelect, MDBInputNumeric} from "mdbreact";
import { event } from "jquery";
import axios from 'axios';
class App extends Component {
static propTypes = {
kind: PropTypes.oneOf(['input','button'])
};
constructor(props) {
super(props);
this.state = {
drawResults: [],
mainDrawSet: 40,
mainBallsDrawn: 5,
powerBallSet: 5,
powerballBallsDrawn: 0
};
}
componentDidMount(){
this.fetchResults();
}
playLotto (mainDrawSet,mainBallsDrawn,powerBallSet,powerballBallsDrawn) {
fetch('/draw',{
method: 'post',
body: JSON.stringify({draw:this.state}),
headers: {
'Access-Control-Allow-Origin':'*',
'Content-Type':'x-www-form-urlencoded',
'Accept': 'application/json',
'Content-Type': 'application/json;charset=UTF-8',
}
})
.then(res => {
console.log(res)
})
.catch(err => {
console.log(err)
})
console.log(this.state);
};
submit () {
this.playLotto(this.state.mainDrawSet,this.state.mainBallsDrawn,this.state.powerBallSet,this.state.powerballBallsDrawn)
this.setState({
mainDrawSet: 40,
mainBallsDrawn: 5,
powerBallSet: 5,
powerballBallsDrawn: 0
})
};
exportTasks = (_this) => {
let _url = $(_this).data('href');
window.location.href = _url;
}
fetchResults = async () => {
try {
const res = await fetch('/lotto_results', {
method: 'GET',
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
}
});
const res_1 = await res.json();
return this.setState({ drawResults: res_1.data });
} catch (err) {
return console.log(err);
}
}
render() {
return (
<MDBContainer>
<MDBRow>
<MDBCol md="12" className="mb-r">
<h2 className="text-uppercase my-3">Lotto Draw Machine:</h2>
<div data-test="container" className="container-fluid section mb-5 border p-3">
<form className="mx-3 grey-text row" style={{ position: "relative", marginTop: "1.5rem", marginBottom:"1.5rem"}} data-test="row">
<div className="form-row align-items-center">
<div data-test="col" className="col">
<div className="md-form form-group form-lg md-bg" style={{position: "relative", marginTop: "1.5rem", marginBottom: "1.5rem"}}>
<label style={{ position: "relative", marginTop: "1.5rem", marginBottom:"1rem"}} htmlFor="mainDrawSet">Number of balls in main draw set</label>
<NumberPicker min={40} max={49} defaultValue={40} type="number" className="custom-select" id="mainDrawSet" value={this.state.mainDrawSet} onChange={mainDrawSet => this.setState({ mainDrawSet})} style={{width: "400px", height: "40px"}}/>
<label style={{ position: "relative", marginTop: "1.5rem", marginBottom:"1rem"}} htmlFor="mainDrawSet">Please choose a number between 40 and 49</label>
</div>
</div>
<div data-test="col" className="col">
<div className="md-form form-group form-lg md-bg">
<label style={{ position: "relative", marginTop: "1.5rem", marginBottom:"1rem"}} htmlFor="mainDraw">Number of balls in main draw</label>
<NumberPicker min={5} max={7} defaultValue={5} type="number" className="custom-select" id="mainDraw" value={this.state.mainBallsDrawn} onChange={mainBallsDrawn => this.setState({ mainBallsDrawn })} style={{width: "400px", height: "40px"}}/>
<label style={{ position: "relative", marginTop: "1.5rem", marginBottom:"1rem"}} htmlFor="mainDraw">Please choose a number between 5 and 7</label>
</div>
</div>
</div>
<div className="mx-3 grey-text row" style={{ position: "relative", marginTop: "1.5rem", marginBottom:"1.5rem"}} data-test="row">
<div className="form-row align-items-center">
<div data-test="col" className="col">
<div className="md-form form-group form-lg md-bg" style={{position: "relative", marginTop: "1.5rem", marginBottom: "1.5rem"}}>
<label htmlFor="powerBallSet" style={{ position: "relative", marginTop: "0.5rem", marginBottom:"0.5rem"}}>Powerball Set</label>
<NumberPicker min={5} max={49} defaultValue={5} type="number" className="custom-select" id="powerBallSet" value={this.state.powerBallSet} onChange={powerBallSet => this.setState({ powerBallSet })} style={{width: "400px", height: "40px"}}/>
<label htmlFor="powerBallSet" style={{ position: "relative", marginTop: "0.5rem", marginBottom:"0.5rem"}}>Please choose a number between 5 and 49</label>
</div>
</div>
<div data-test="col" className="col">
<div className="md-form form-group form-lg md-bg">
<label htmlFor="powerBall" style={{ position: "relative", marginTop: "0.5rem", marginBottom:"0.5rem"}}>Number of powerball balls</label>
<NumberPicker min={0} max={3} defaultValue={0} type="number" className="custom-select" value={this.state.powerballBallsDrawn} onChange={powerballBallsDrawn => this.setState({ powerballBallsDrawn})} id="powerBall" style={{width: "400px", height: "40px"}}/>
<label htmlFor="powerBall" style={{ position: "relative", marginTop: "0.5rem", marginBottom:"0.5rem"}}>Please choose a number between 0 and 3</label>
</div>
</div>
</div>
</div>
<div className="mx-3 grey-text row" style={{ position: "relative", marginTop: "1.5rem", marginBottom:"1.5rem"}} data-test="row">
<div data-test="row" className="row">
<button data-test="button" type="button" className="btn-info btn Ripple-parent" style={{width: "400px", height: "40px"}} onClick={()=>{this.submit()}}>Let's Play!<div data-test="waves" className="Ripple "></div></button>
</div>
</div>
</form>
</div>
</MDBCol>
</MDBRow>
<MDBRow>
<MDBCol md="7" className="mb-r">
<div className="mx-3 grey-text row" style={{ position: "relative", marginTop: "1.5rem", marginBottom:"1.5rem"}} data-test="row">
<div className="form-row align-items-center">
<div data-test="col" className="col">
<div className="md-form form-group form-lg md-bg" style={{position: "relative", marginTop: "1.5rem", marginBottom: "1.5rem"}}>
<h4 className="text-uppercase my-3">Lotto Results:</h4>
</div>
</div>
<div data-test="col" className="col">
<div className="md-form form-group form-lg md-bg">
<button data-href="/tasks" data-test="button" type="button" className="btn-info btn mr-5 Ripple-parent" style={{width: "400px", height: "40px"}} onClick={()=>{this.exportTasks(event.target)}}>Export To CSV</button>
</div>
</div>
</div>
</div>
</MDBCol>
</MDBRow>
<MDBRow>
<MDBCol md="12" className="mb-r">
return {drawResults.map((result, index) =>
<div key={index} className="mx-3 grey-text row" style={{ position: "relative", marginTop: "1.5rem", marginBottom:"1.5rem"}} data-test="row">
<table className="table center">
<thead className="grey lighten-2">
<tr>
<th scope="col">Draw Time</th>
<th scope="col"> Draw Result</th>
<th scope="col"> Number of Main Balls Drawn</th>
<th scope="col">Number of Powerball Balls Drawn</th>
</tr>
</thead>
<tbody>
<tr>
<th scope="row">result.draw_time</th>
<td>result.results</td>
<td>result.main_draw_balls</td>
<td>result.power_balls</td>
</tr>
</tbody>
</table>
</div>
)}
</MDBCol>
</MDBRow>
</MDBContainer>
);
}
}
App = Radium(App);
export default App;
if (document.getElementById('app')) {
ReactDOM.render(
<App />
, document.getElementById('app'));
}
也许有人会建议如何修正这个错误。我在构造函数中声明了state变量，并尝试在fetchResults（）方法中为其赋值，但脚本失败，变量未定义。
共有2个答案
宋昊然
我认为您的问题来自返回此。setState（{drawResults:res_1.data}）
您不能返回setState，因为setState只是修改组件的状态，您应该尝试使用this。setState（{drawResults:res_1.data}）
上官琦
脚本失败，出现“未定义”错误，因为变量实际上未定义。
您说您已经在构造函数中声明了它。您实际上在构造函数中所做的是创建一个this.state的属性（或者更准确地说，创建一个对象的属性，然后将其分配给this.state）。这很好，但是你需要引用属性，而不是变量。
要修复此错误，请将drawResults更改为this。状态drawResults。
编辑：我想更改这一行：return{drawResults.map（…
类似资料：
-
问题内容： 在jQuery的核心风格指南建议两种不同的方法来检查一个变量是否被定义。 全局变量： 局部变量： 特性： 为什么jQuery为什么对全局变量使用一种方法而对局部变量和属性使用另一种方法？ 问题答案： 对于未声明的变量，将返回字符串文字，而身份检查将触发错误 “未定义foo” 。 对于局部变量（您 知道 已在某处声明），不会发生此类错误，因此进行身份检查。
-
我试图在MySQL中创建一个过程。这是正文： 但是当我保存它时，我得到这个错误： 处理您的请求时发生了一个或多个错误： 以下查询失败：“创建定义器”=root@localhost过程getAutoFinishTimeRemaining（按_order_id INT，按_Hoursint）非确定性读取SQL数据SQL安全定义器开始声明_date_delivered datetime；声明_date_
-
This sets the value of $undefined for Smarty, default is null. Currently this is only used to set undefined variables in $global_assign to a default value. 该变量为Smarty设定没有得到定义的变量的值,默认为空.当前仅用来设定全局配置中的未定
-
问题内容： 我知道这是一个基本问题，但是我很好奇下面的代码为什么不起作用。没有用例不会声明此变量。 我得到错误 我确定这只是我还在学习的基本GOLANG内容。 谢谢你的支持 问题答案： 块有自己的范围。在您的情况下，它们在外部不可见。 您可以在修复前声明。 文件：https：//golang.org/ref/spec#Declarations_and_scope 您可能还需要阅读：Go中的声明范围
-
问题内容： 作为Go“ newb”，我 不确定 在编译程序时为什么会在控制台中收到 未定义err 和 未定义用户 的错误。 我有： 我意识到我可以在条件块之前声明and 变量，但是我想知道为什么这不起作用。与一次性创建两个新变量有关吗？ UDPATE 对此有些混乱。 我现在有： 和我的错误现在是 用户声明的，不使用 。目前，我还没有解决 错误的 部分，但是我不确定为什么会遇到用户错误。 问题答案：
-
问题内容： 当我尝试引用永不设置或未设置的会话（）时，我在核心CakePHP文件中出现错误： 我已经搜索了我的代码（在app /目录中），但是找不到对或的引用。我有什么想念的吗？ 当我尝试运行任何单元测试时，都会显示此错误。这是正常的吗？我已经清除了目录，并用另一个目录（相同版本）替换了该目录，以确保我没有无意间修改了核心文件中的任何内容，但是仍然出现相同的错误。我不确定这是否只是框架中的缺陷或其