Обновления Реагировать Принадлежит

Question

Я не знаю, почему я могу использовать 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); 

Answer 1

Реквизиты должны быть зарезервированы для данных, которые не будут меняться, считайте настройки/данные конфигурации и т. Д. Состояние, с другой стороны, должно содержать данные, которые обработчики событий компонента могут изменить для запуска обновления пользовательского интерфейса.

Поскольку вы меняете значение данных, вы должны использовать состояние вместо реквизита. В вашем примере вы бы сделали следующее:

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