繁体   English   中英

未捕获的引用错误:未定义状态(React.js)

[英]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>

您正在使用冒号来访问thisstate属性。 它应该是一个点。 而且由于您正在构造一个常规 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.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM