更新陣營道具

我不知道爲什麼我可以使用push變異的道具，但是當我嘗試this.props.arr1 = 2;我得到以下錯誤：更新陣營道具

TypeError: "arr" is read-only

這裏是我的代碼：

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);

來源

2016-06-10 neo

你的問題是什麼？你問你爲什麼不應該改變道具嗎？ – azium

是的，我不知道爲什麼我可以'推'來改變道具，但是當我嘗試'this.props.arr1 = 2'時，有些事情是錯誤的，並且waring：只讀， – neo

在React中，想法是修改狀態'this.state'，但只能通過調用'this.setState（{key：value}）'這會導致React到..好..反應（爲你調用'render（）'）。修改道具不會爲你做這件事，所以沒有意義。 – azium

道具應該保留用於不會改變的數據，思考設置/配置數據等。另一方面，狀態應該包含組件的事件處理程序可能更改以觸發UI更新的數據。

當你改變數據的值時，你應該使用狀態而不是道具。對於你的例子，你會做以下幾點：

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);

來源

2016-06-10 06:30:28 Jeemusu

更新陣營道具

回答

相關問題