[英]Uncaught Reference Error: state is not defined (React.js)
初学者在这里。 这个错误不断弹出,我不知道为什么。 我的网页确实显示了我对脚本所做的更改,但只有当我注释掉样式以隐藏形状或保留它以显示形状时。
我想创建一个网页,每秒都会通过其大小、边框半径('perCent')和背景颜色来改变形状的外观。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Timed Shapes</title>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<style>
.shape-item{
padding: 10px;
margin: 20px;
display: inline-block;
width: 100px;
height: 100px;
background-color: blue;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="shape-item">
<div></div>
<div></div>
</div>
<script type="text/babel">
"use strict";
var colours = ["#77b3d1", "#E94F37", "#1C89BF", "#A1D363", "#85FFC7", "#297373", "#FF8552", "#A40E4C", "#85AFC0", "#296573", "#AA8552", "#CC0E4C", "#567187", "#c6c976", "#967c64", "#e497ed", "#d24cff", "#e2ceb1", "#cc999e", "#97bf9a"];
class Shapes extends React.Component{
constructor(props){
super(props);
this.state = {
shape: {
bgColour: colours[Math.floor((Math.random() * colours.length))],
size: 100,
perCent: "%50"
}
}
}
componentDidMount(){
this.timerID = setInterval(() => this.updateShape(), 1000);
}
componentWillUnmount(){
clearInterval(this.timerID);
}
updateShape(){
let randomIndex = Math.floor((Math.random() * colours.length));
this.setState(
{
shape: {
bgColour: colours[Math.floor((Math.random() * colours.length))],
size: (Math.random() * 125),
perCent: (Math.random() * 100)
}
}
)
}
render(){
var shapeStyle = {
padding: 10,
margin: 20,
display: 'inline-block',
backgroundColor: {this:state.bgColour},
borderRadius: {this:state.perCent},
width: {this:state.size},
height: {this:state.size}
}
return(
<div style={shapeStyle}>
{this.state.shape}
</div>
)
}
}
ReactDOM.render(<Shapes />, document.querySelector(".shape-item"));
shapesRender = [];
for(let i=0; i < 60; i++){
shapesRender.push(<Shapes key={i} />);
}
ReactDOM.render(shapesRender, document.querySelector(".shape-item"));
</script>
</body>
</html>
您正在使用冒号来访问this
的state
属性。 它应该是一个点。 而且由于您正在构造一个常规 JS 对象以用于内联样式,因此您不需要将每个键的值放入嵌套的 JS 对象中,就像您为 backgroundColor、borderRadius、宽度和高度所做的那样。 它应该如下所示:
var shapeStyle = {
padding: 10,
margin: 20,
display: 'inline-block',
backgroundColor: this.state.bgColour,
borderRadius: `${this.state.perCent}%`, // append % to numerical perCent value
width: this.state.size,
height: this.state.size
}
附加说明,您为perCent
提供的初始值是“%50”,它是一个字符串,有一个百分比符号,并且在前面,但每次更新,它都会更改为一个新的 Number 值。 我会从一开始就将其保留为数字(将初始值从perCent: "%50"
更改为perCent: 50
)并在最后一步中添加百分号,将其全部插入到样式对象中,就像我一样以上。
对于尼克的观点(在帖子的评论中),如果您想在 div 中显示状态对象,以便查看样式是如何受到影响的,那很好,但您需要使用JSON.stringify(this.state.shape)
状态. JSON.stringify(this.state.shape)
。 如果您打算显示除实际 JS 对象之外的其他内容,则需要进行调整,以便显示新组件或 HTML 元素而不仅仅是字符串。
未定义状态,因为您使用了错误的语法“:”
将 {this.state.shape.bgColour} 用于 {this:state.bgColour}
您不能在 jsx 中显示带有 {} 的对象:
将 {this.state.shape} 更改为{this.state.shape}
this.state.shape.size} 将{this:state.bgColour}
{this.state.shape.size}
更改为{this.state.shape.bgColour}
...
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Timed Shapes</title>
<script crossorigin src="https://unpkg.com/react@17/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@17/umd/react-dom.development.js"></script>
<script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
<style>
.shape-item{
padding: 10px;
margin: 20px;
display: inline-block;
width: 100px;
height: 100px;
background-color: blue;
border-radius: 50%;
}
</style>
</head>
<body>
<div class="shape-item">
<div></div>
<div></div>
</div>
<script type="text/babel">
"use strict";
var colours = ["#77b3d1", "#E94F37", "#1C89BF", "#A1D363", "#85FFC7", "#297373", "#FF8552", "#A40E4C", "#85AFC0", "#296573", "#AA8552", "#CC0E4C", "#567187", "#c6c976", "#967c64", "#e497ed", "#d24cff", "#e2ceb1", "#cc999e", "#97bf9a"];
class Shapes extends React.Component{
constructor(props){
super(props);
this.state = {
shape: {
bgColour: colours[Math.floor((Math.random() * colours.length))],
size: 100,
perCent: "%50"
}
}
}
componentDidMount(){
this.timerID = setInterval(() => this.updateShape(), 1000);
}
componentWillUnmount(){
clearInterval(this.timerID);
}
updateShape(){
let randomIndex = Math.floor((Math.random() * colours.length));
this.setState(
{
shape: {
bgColour: colours[Math.floor((Math.random() * colours.length))],
size: (Math.random() * 125),
perCent: (Math.random() * 100)
}
}
)
}
render(){
console.log(this.state)
var shapeStyle = {
padding: 10,
margin: 20,
display: 'inline-block',
backgroundColor: this.state.shape.bgColour,
borderRadius: this.state.shape.perCent,
width: this.state.shape.size,
height: this.state.shape.size
}
return(
<div style={shapeStyle}>
{this.state.shape.size}
</div>
)
}
}
ReactDOM.render(<Shapes />, document.querySelector(".shape-item"));
let shapesRender = [];
for(let i=0; i < 60; i++){
shapesRender.push(<Shapes key={i} />);
}
ReactDOM.render(shapesRender, document.querySelector(".shape-item"));
</script>
</body>
</html>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.