Reactjs 在react中重新呈现新状态的变通方法 import React，{Component}来自'React'； 从“./components/board.js”导入正方形； 常量spaceArr=（）=>{ 常数arr=[]； 对于（var i=0；i

试试这个

      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;

试试这个

      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;

---

您不应该像中提到的那样直接改变this.state。 在设置新状态之前，使用concat获取新数组：

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

---

您不应该像中提到的那样直接改变this.state。 在设置新状态之前，使用concat获取新数组：

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

---

你回来的时候应该是

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

返回(
});

在您返回时

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

返回(
});

谢谢大家的回答。我的错误是设置了“live”属性作为状态在子组件中。相反，我只是将其作为props直接传递给呈现方法条件，这完全解决了问题。此外，我认为在解决asynch setState方法时，一个好的绕过方法是通过将其设置为属性内的回调来更改状态，例如（setState（{prop:someFunction（）}））.无论如何，再次感谢。

感谢大家尝试回答。我的错误是设置了“现场”属性作为状态在子组件中。相反，我只是将其作为props直接传递给呈现方法条件，这完全解决了问题。此外，我认为在解决asynch setState方法时，一个好的绕过方法是通过将其设置为属性内的回调来更改状态，例如（setState（{prop:someFunction（）}））。无论如何，再次感谢。

你能在定义了

点击
函数的地方分享你的代码吗？@Md.estiakahmed好，更新了吗？你能在定义了
点击
函数的地方分享你的代码吗？@Md.estiakahmed好，更新了吗？我做了一些修改，但可惜没有用。它仍然没有用更新后的状态信息重新呈现，尽管虽然它将其记录为在控制台中发生。我做了一些更改，但没有效果。它仍然没有使用更新的状态信息重新渲染，尽管它将其记录为在控制台中发生。有意义但仍然没有重新渲染有意义但仍然没有重新渲染