Работа для повторного рендеринга нового состояния в реакции

Question

 import React, {Component} from 'react'; 
     import Square from './components/board.js'; 

     const spaceArr =()=> { 
     const arr =[]; 
     for (var i=0; i<20; i++){ 
     arr.push(Math.floor(Math.random()*(400-0))); 
     } 
     return arr; 
     }; 


     class App extends Component{ 

     constructor(){ 
      super(); 
      this.state={ 
      spaces: spaceArr(), 
      array : new Array(400).fill(false) 
      } ; 
      var th = this; 
      this.state.spaces.map(function(value){ 
      th.state.array.splice(value, 1, true)}); 
      this.click= this.click.bind(this); 
      } 

      componentDidMount(){ 
      this.setState({array: this.state.array}) 
      } 

      click(i, live) { 
      this.state.array[i]= !live; 
      var array = this.state.array; 
      this.setState({array: array}, function(){ 
      console.log(array[i]) 
      }) 
      } 


     render(){ 

      var th = this; 
      return (
      <div> 
       <div className='backboard'> 
       <div className='board'> 
       {this.state.array.map(function(live, index){ 

        return <Square key={index} living={live} clicker= 
        {th.click.bind(this, index, live)}/> 
        }) 

        } 
       </div> 
      </div> 
      </div> 
      ) 
      } 
     } 

     export default App; 

Я пытаюсь выяснить, как повторно отобразить измененное изменение состояния после setState. событие click является обработчиком, который передается дочернему компоненту. обновленный массив должен повторно отобразить обновленный рендеринг дочерних компонентов.

Answer 1

Попробуйте это.

click(i, live) { 
     var array = this.state.array; 
     array[i]=!live 
     this.setState({array:array}, function(){ 
     console.log(this.state.array[i]) 
     }) 
    } 

Answer 2

Вы не должны мутировать this.state непосредственно, как указано в React docs. Использование CONCAT для получения нового массива перед установкой нового состояния:

click(i, live) { 
    var newArray = this.state.array.concat(); 
    newArray[i]!=live 
    this.setState({array: newArray}, function(){ 
    console.log(this.state.array[i]); 
    }) 
} 

Answer 3

по возвращении он должен быть,

return (<Square key={index} living={live} 
    clicker= {th.click.bind(th, index, live)}/> 
}); 

Answer 4

благодарит всех за то, чтобы ответить. Моя ошибка заключалась в установке атрибута «live» в дочернем компоненте как состоянии. Вместо этого я просто передал его в качестве реквизита непосредственно для условий метода рендеринга, и это полностью разрешило проблему. Кроме того, я думаю, что при решении asynch setState метод хорошего байпаса меняет состояние, устанавливая его на обратный вызов в свойстве, например. (setState ({prop: someFunction()})). В любом случае, еще раз спасибо.