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

你不应该像React docs中提到的那样直接改变this.state。在设置新状态之前使用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”属性设置为状态。我只是将它作为道具直接传递给渲染方法条件，这完全解决了这个问题。另外，我认为在解决异步setState方法时，一个好的旁路是通过将其设置为属性内的回调来改变状态，例如。（setState（{prop：someFunction（）}））。无论如何，再次感谢。

努力重新渲染反应中的新状态

4 个答案: