Question

我不知道为什么我可以使用push来改变道具，但是当我尝试this.props.arr1 = 2;时，我收到以下错误：

TypeError：＆＃34; arr＆＃34;是只读的

这是我的代码：

var Demo=React.createClass({
    test1:function(){
        this.props.arr1=2;
        console.log(this.props.arr1);//TypeError: "arr" is read-only
    },
    test2:function(){
        this.props.arr2.push(2);
        console.log(this.props.arr2);//Array [ 1, 2 ]
    },
    getDefaultProps:function(){
        return {arr1:1,arr2:[1]};
    },
    render:function(){
        return (
            <div>
                <div onClick={this.test1}>demo1</div>
                <div onClick={this.test2}>demo2</div>
            </div>
        )
    },
});

ReactDOM.render(<Demo /> , document.body);

Answer 1

道具应保留用于不会改变的数据，考虑设置/配置数据等。另一方面，状态应包含组件的事件处理程序可能更改的数据以触发UI更新。

当您更改数据的值时，您应该使用state而不是props。对于您的示例，您将执行以下操作：

var Demo = React.createClass({

    getInitialState:function(){
        return {
          foo : 1,
          bar : [1]
        };
    },

    setFoo:function(){
        this.state.foo = 2;
        this.setState({ foo : this.state.foo });
        console.log(this.state.foo);
    },

    setBar:function(){
      this.state.bar.push(2);
      this.setState({ bar : this.state.bar });
      console.log(this.state.bar);
    },

    render:function(){
        return (
            <div>
                <div onClick={this.setFoo}>demo1</div>
                <div onClick={this.setBar}>demo2</div>
            </div>
        )
    },
});

ReactDOM.render(<Demo /> , document.body);

更新React道具

1 个答案: