时间戳

首页 > 解决方案 > 为什么在为显示属性等类属性调用 setState 时会出错？

reactjs - 为什么在为显示属性等类属性调用 setState 时会出错？

问题描述

当单击按钮（组件 B）时，我试图更改组件 A 的状态。我让处理程序在正确的时间运行，但我不断收到关于无法更改某些属性的错误，例如组件 B 等其他组件中的显示（参见图 2）。我了解反应中的某些内容无法修改，但我不明白为什么我的代码在最初加载时可以工作，但在我只是更改组件 A 的状态时失败并抛出错误。

更具体地说，我试图改变的组件 A 的原始状态可以在附加的 img 中看到

处理程序调用之前的状态

然后我点击一个按钮，下面看到的处理程序被调用

delete_list_item = id => {
        console.log("deleting : ", id);
        console.log("before : ", this.state)
        this.setState({
            test: 2
        }, ()=>{
            console.log("after : ", this.state)
        })
    }

如果你看上面的img，你可以看到id被正确传入，我尝试调用setState。我只是试图将 state.test 的值从 1 更改为 2 作为测试用例。这是我收到许多类似于以下 img 的错误的地方。再次在调用 setState 之前，我没有收到这些错误，但是一旦我收到，就会抛出一堆这些错误。

我得到的错误之一

任何帮助表示赞赏，谢谢！

标签： reactjsstate

解决方案

样式对象属性需要在对象的初始声明中分配，因为对象是只读的或变为只读的。

代替

class Component extends React.Component {
    styles = {
        width: "50px"
    }

    render() {
        if(this.props.margin){
            styles.margin = this.props.margin
        }

        return <div style={this.styles}></div>
    }
}

我将条件分配移动到样式对象的初始定义，如下所示

class Component extends React.Component {
    styles = {
        width: "50px",
        margin: this.props.margin ? this.props.margin : "none"
    }

    render() {

        return <div style={this.styles}></div>
    }
}

推荐阅读