Question


export default class Data extends Component {
  constructor(props)
  {
    super(props);
    this.state = {
      pages : [],
    }
    this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick(event){

    
   var newpages = this.state.pages;
   
    newpages.push(event);
    this.setState = ({
      pages: newpages,
    });
    console.log(this.state.pages)
    if(this.state.pages!=undefined)
    {this.state.pages.forEach(element => 
                            ((element!=undefined) ?console.log("jsjha"):console.log("hsdgahdhasgh") ))}
//working  
    
  }

  

  render() {
    console.log(this.state.pages); // not working, nothing is printed in the console
    return (
      <>
    
    <button onClick={()=>this.handleClick("Tab 1")} value="Tab 1" id="1">Tab 1</button>
    <button onClick={()=>this.handleClick("Tab 2")} value="Tab 2" id="2">Tab 2</button>
    <button onClick={()=>this.handleClick("Tab 3")} value="Tab 3" id="3">Tab 3</button>
    <h3>Hello this is Data bar!</h3>
    <hr/>
    
    { 
      (this.state.pages.map(function(element,i)
        {return <p key={i}>{element}hdkashdak</p> }))
    }
// not working
                            
                   
    
    
    </>
    );
  }
}

在console.log中，我可以看到正在打印“ jsjha”，表示状态已被更新。但是在渲染功能中，我看不到正在更新的集合。

我甚至绑定了handleClick函数。

此外，使用JSX map函数是否一切正确？我正在使用return语句，但仍然无法正常工作。

Answer 1

首先，this.setState的用法是错误的。 setState是一个函数，您应该调用它而不为其分配任何内容。除了这个问题，数组引用还有另一个问题。因为您在状态中使用的是先前的数组引用，所以为什么react不知道数组是否被更改。从而不重新渲染。为此，您必须确保更改页面的数组引用，

this.setState({
  pages: [...newpages],
});

您可以查看此thread以获得更多了解

Answer 2

尝试一下：

export default class Data extends Component {
  constructor(props)
  {
    super(props);
    this.state = {
      pages : [],
    }
    this.handleClick = this.handleClick.bind(this);
  }
  
  handleClick(event){
    this.setState({
      pages: [...this.state.pages, event],
    });
  }

  

  render() {
    console.log(this.state.pages); // not working, nothing is printed in the console
    return (
      <>
    
    <button onClick={()=>this.handleClick("Tab 1")} value="Tab 1" id="1">Tab 1</button>
    <button onClick={()=>this.handleClick("Tab 2")} value="Tab 2" id="2">Tab 2</button>
    <button onClick={()=>this.handleClick("Tab 3")} value="Tab 3" id="3">Tab 3</button>
    <h3>Hello this is Data bar!</h3>
    <hr/>
    
    { 
      (this.state.pages.map(function(element,i)
        {return <p key={i}>{element}hdkashdak</p> }))
    }
// not working
                            
                   
    
    
    </>
    );
  }
}

调用setState后，React不重新渲染，为什么？

2 个答案: