Javascript 调用setState后React没有重新渲染，为什么？ 导出默认类数据扩展组件{ 建造师（道具） { 超级（道具）； 此.state={ 页码：[]， } this.handleClick=this.handleClick.bind（this）； } handleClick（事件）{ var newpages=this.state.pages； newpages.push（事件）； this.setState=({ 页面：新页面， }); console.log（this.state.pages） if（this.state.pages！=未定义） {this.state.pages.forEach（元素=> （（element！=未定义）？console.log（“jsjha”）：console.log（“hsdgahdhasgh”））} //工作 } render（）{ console.log（this.state.pages）；//不工作，控制台中没有打印任何内容 返回( this.handleClick（“Tab 1”）}value=“Tab 1”id=“1”>选项卡1 this.handleClick（“Tab 2”）}value=“Tab 2”id=“2”>选项卡2 this.handleClick（“Tab 3”）}value=“Tab 3”id=“3”>选项卡3 你好，这里是数据栏！ { （this.state.pages.map（函数（元素，i）） {return{element}hdkashdak}） } //不起作用 ); } }

在console.log中，我可以看到正在打印“jsjha”，这意味着状态正在更新。 但是在render函数中，我看不到集合正在更新

我甚至绑定了handleClick函数

另外，JSX映射函数是否一切正常？我正在使用return语句，但它仍然不起作用。

请尝试以下操作：

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

导出默认类数据扩展组件{
建造师（道具）
{
超级（道具）；
此.state={
页码：[]，
}
this.handleClick=this.handleClick.bind（this）；
}
handleClick（事件）{
这是我的国家({
页面：[…this.state.pages，事件]，
});
}
render（）{
console.log（this.state.pages）；//不工作，控制台中没有打印任何内容
返回(
this.handleClick（“Tab 1”）}value=“Tab 1”id=“1”>选项卡1
this.handleClick（“Tab 2”）}value=“Tab 2”id=“2”>选项卡2
this.handleClick（“Tab 3”）}value=“Tab 3”id=“3”>选项卡3
你好，这里是数据栏！

{ 
（this.state.pages.map（函数（元素，i））
{return
{element}hdkashdak
}）
}
//不起作用
);
}
}

首先，this.setState的用法是错误的。setState是一个函数，您应该调用它，而不是为它赋值。除了这个问题，还有一个关于数组引用的问题。因为您正在使用状态中的前一个数组引用，所以react不知道数组是否已更改。因此不会重新渲染。您必须确保通过执行此操作更改页面的数组引用

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

---

您可以对此进行研究以获得更多理解

this.setState=（{pages:newpages，}）-这是赋值，你没有调用方法。答案是用你自己的措辞。。。“调用setState之后”。代码中没有任何地方可以调用
setState
函数。您必须更改值以重新加载它，在您的方法中，您将再次在状态中设置状态值。无需对newpages数组进行分解。更大的问题是
setState
是要调用的函数，而不是要分配的变量，你悄悄地纠正了，没有提及。我的错，@David，谢谢你提及。更新我的答案。谢谢！
this.setState({
  pages: [...newpages],
});