Javascript React Js SetState不起作用，在我的代码中应该做些什么来修复它

我正在尝试更新react组件中的集合，但更新值后没有任何更改。我做错了什么

import React, { Component } from "react";
import "./App.css";

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      pageNo: 0,
      Name: ""
    };
    this.openPage = this.openPage.bind(this);
  }

  render() {
    return (
      <div>
        <button className="tablink"> All Questions </button>
        <button
          className="tablink"
          onClick={() => {
            console.log("setting the state completed");
            this.setState(
              {
                pageNo: 1
              },
              console.log("StateChanged", this.state.pageNo)
            );
          }}
        >
          {" "}
          Home{" "}
        </button>

        <div id="Home" className="tabcontent">
          <h3> Home </h3>
        </div>
        <div id="AllQuestions" className="tabcontent">
          <h3> AllQuestions </h3>
        </div>
      </div>
    );
  }

  openPage() {
    console.log("Function called");
    this.setState({
      pageNo: 2
    });
    console.log(this.state);
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
      tabcontent[i].style.display = "none"; // setting all tab divs to hide
    }

    tablinks = document.getElementsByClassName("tablink");
    for (i = 0; i < tablinks.length; i++) {
      tablinks[i].style.backgroundColor = "";
    }

    document.getElementById(this.state.pageToLoad).style.display = "block";
  }
}

export default App;

import React，{Component}来自“React”；
导入“/App.css”；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
页码：0，
姓名：“
};
this.openPage=this.openPage.bind（this）；
}
render（）{
返回(
所有问题
{
log（“设置完成状态”）；
这是我的国家(
{
页码：1
},
console.log（“StateChanged”，this.state.pageNo）
);
}}
>
{" "}
主页{“}
家
所有问题
);
}
openPage（）{
log（“调用的函数”）；
这是我的国家({
页码：2
});
console.log（this.state）；
var i，tabcontent，tablinks；
tabcontent=document.getElementsByClassName（“tabcontent”）；
对于（i=0；i

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
页码：0，
名称：“”
}
this.openPage=this.openPage.bind（this）；
}
StateChange=（）=>{
log（“设置完成状态”）；
这是我的国家({
页码：1
})
}
openPage（）{
log（“调用的函数”）；
这是我的国家({
页码：2
});
console.log（this.state）；
var i，tabcontent，tablinks；
tabcontent=document.getElementsByClassName（“tabcontent”）；
对于（i=0；i

类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
页码：0，
名称：“”
}
this.openPage=this.openPage.bind（this）；
}
StateChange=（）=>{
log（“设置完成状态”）；
这是我的国家({
页码：1
})
}
openPage（）{
log（“调用的函数”）；
这是我的国家({
页码：2
});
console.log（this.state）；
var i，tabcontent，tablinks；
tabcontent=document.getElementsByClassName（“tabcontent”）；
对于（i=0；i

从“React”导入React，{Component}；
从'react dom'导入{render}；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
否：错，
名称：“”
}
this.handlePage=this.handlePage.bind（this）；
}
手页{
这是我的国家({
页码：！this.state.pageNo
});
}
render（）{
返回(
所有问题
家
{this.state.pageNo？
所有问题
:
家
}
);
}
}
render（，document.getElementById（'root'））；

从“React”导入React，{Component}；
从'react dom'导入{render}；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
否：错，
名称：“”
}
this.handlePage=this.handlePage.bind（this）；
}
手页{
这是我的国家({
页码：！this.state.pageNo
});
}
render（）{
返回(
所有问题
家
{this.state.pageNo？
所有问题
:
家
}
);
}
}
render（，document.getElementById（'root'））；

，不要在渲染函数中使用setState。您使用的是两个不同的名称，1。第2页。pageToLoad..我猜您想使用pageNo代替pageToLoad…并将要加载的新页码存储在变量中，然后使用它更新状态并激活pageI只是在尝试一些事情（检查问题的根源是否是由于我试图编辑字符串数据类型键值对），我确实想使用pageNo。@VahidAkhtar您能告诉我为什么不使用吗？您能告诉我设置状态的另一种方法是什么吗？因为我确实想根据单击的不同按钮设置不同的状态，不要在渲染函数中使用setState。您使用的是两个不同的名称，1。第2页。pageToLoad..我猜您希望使用pageNo代替pageToLoad…并将要加载的新页码存储在变量中，然后使用它更新s

class App extends Component {

constructor(props) {
    super(props);

    this.state = {
        pageNo: 0,
        Name:''
    }

    this.openPage = this.openPage.bind(this);
}

StateChange = () => {
     console.log("setting the state completed");
            this.setState({
                pageNo: 1
            })

}

openPage(){
    console.log("Function called");
    this.setState({
        pageNo: 2
    });
    console.log(this.state);
    var i, tabcontent, tablinks;
    tabcontent = document.getElementsByClassName("tabcontent");
    for (i = 0; i < tabcontent.length; i++) {
        tabcontent[i].style.display = "none"; // setting all tab divs to hide
    }

    tablinks = document.getElementsByClassName("tablink");
    for (i = 0; i < tablinks.length; i++){
        tablinks[i].style.backgroundColor = "";
    }

    document.getElementById(this.state.pageToLoad).style.display = "block";

}

render() {
     console.log("StateChanged", this.state.pageNo) //check this

    return (
    <div>

        <button className="tablink"> All Questions </button>
                                        {/*StateChange function*/}
        <button className="tablink" onClick={this.StateChange}> Home </button>

        <div id="Home" className = "tabcontent">
            <h3> Home </h3>
        </div>
        <div id="AllQuestions" className="tabcontent">
            <h3> AllQuestions </h3>
        </div>
    </div>);
}

}

export default App;

import React, { Component } from 'react';
import { render } from 'react-dom';

class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      pageNo: false,
      Name: ''
    }
    this.handlePage = this.handlePage.bind(this);
  }

  handlePage() {
    this.setState({
      pageNo: !this.state.pageNo
    });
  }

  render() {
    return (<div>
      <button className="tablink" onClick={this.handlePage}> All Questions </button>
      <button className="tablink" onClick={this.handlePage}> Home </button>
      {this.state.pageNo ?
        <div id="AllQuestions" className="tabcontent">
          <h3> AllQuestions </h3>
        </div> :
        <div id="Home" className="tabcontent">
          <h3> Home </h3>
        </div>}
    </div>);
  }
}

render(<App />, document.getElementById('root'));