React.js setState 不起作用。渲染问题

Question

我在登录后隐藏登录和注册时遇到问题

登录后我设置状态检查：真，母鸡，通过点击注销按钮，我想设置状态检查：假-但不幸的是它不起作用。

在我尝试在 Navigation.js 中设置状态之前，但在单击注销按钮后，登录/注册可能会显示 0.01 秒，但我仍然只能看到注销按钮 请帮忙，提前谢谢！

这是我的代码

导航.js

import React, { Component } from "react";
import "./Navigation.css";
import { Nav, Navbar } from "react-bootstrap";
import axios from 'axios'
export default class Navigation extends Component {
  state = {

    button: []
  }



  render() {

    let buttons

    if (this.props.check) {
      buttons = (
        <Nav className="mr-auto">
          <Nav.Link href="\signin" onClick={() => {
            localStorage.removeItem('jwt')
            this.setState({
              check: false
            })
          }
          }>Logout</Nav.Link>

        </Nav>
      )
    }
    else if (!this.props.check) {
      buttons = (
        <Nav className="mr-auto">
          <Nav.Link href="\signin">Sign In</Nav.Link>
          <Nav.Link href="\register">Register</Nav.Link>
        </Nav>
      )
    }
    return (
      <Navbar
        className="NavbarContainer"
        collapseOnSelect
        expand="lg"
        bg="light"
        variant="light"
      >
        <Navbar.Brand href="\">
          LOGO
          {/* <Nav.Link href="\">LOGO</Nav.Link> */}
        </Navbar.Brand>
        <Navbar.Toggle aria-controls="responsive-navbar-nav" />
        <Navbar.Collapse id="responsive-navbar-nav">
          {/* <Nav className="mr-auto">
            <Nav.Link href="\signin">Sign In</Nav.Link>
            <Nav.Link href="\register">Register</Nav.Link>
          </Nav> */}
          {buttons}
        </Navbar.Collapse>
      </Navbar>
    );
  }
}

和 App.js

import React, { Component } from "react";
import {
  BrowserRouter,
  BrowserRouter as Router,
  Route,
  Switch,
} from "react-router-dom";
import axios from "axios";

import Navigation from "./components/Navigation/Navigation";

export default class App extends Component {
  state = {
    user: [],
    check: false,
  };

  async componentDidMount() {

    axios.get("http://localhost:8002/users/me", {
      headers: {
        Authorization: `Bearer ` + localStorage.getItem("jwt"),
      },
    })
      .then((res) => {
        this.setState({
          user: res.data,
          check: true,
        })

        console.log(res.data);
      })
      .catch((err) => {
        console.log("error nie dziala" + err);
      });
  }

  render() {
    return (
      <div className="App">
        <BrowserRouter>
          <Navigation user={this.state.user, this.state.check} />
          <section className="mainContainer">
            <Router>
              <Switch>
                <Route exact path="/" component={Home}></Route>
                <Route path="/register" component={Register}></Route>
                <Route path="/signin_user" component={SignInAsUser}></Route>
                <Route
                  path="/signin_specialist"
                  component={SignInAsSpecialist}
                ></Route>

                <Route
                  path="/user_registration"
                  component={RegisterUser}
                ></Route>

                <Route
                  path="/specialist_registration"
                  component={RegisterSpecialist}
                ></Route>

                <Route
                  path="/search_for_specialist"
                  component={SearchForSpecialist}
                ></Route>
                <Route
                  path="/activespecialists"
                  component={ActiveSpecialists}
                ></Route>

                <Route
                  path="/specialist_account"
                  component={SpecialistAccount}
                ></Route>
                <Route path="/signin" component={SignIn}></Route>
                <Route
                  path="/user"
                  component={() => <UserAccount user={this.state.user} />}
                ></Route>
                <Route path="/specialist" component={SpecialistAccount}></Route>
                <Route
                  path="/activeSpecialist"
                  component={SpecialistAccount}
                ></Route>
                <Route component={NoMatch}></Route>
              </Switch>
            </Router>
          </section>
          <Footer />
        </BrowserRouter>
      </div>
    );
  }
}

Answer 1

它不起作用，因为您正在更新导航中的状态，该状态仅包含一个按钮数组，而不是检查状态。 您应该从您的孩子那里更新您的父母状态。例如，您可以通过将父 setState 函数传递给子来做到这一点。 这里有几个类似的问题，试试看这里，例如： How to update parent's state in React?

或者你可以实现一些全局状态。