子组件在同一渲染期间从父状态获得不同的状态版本

Question

我在React中遇到了这个非常令人困惑的问题，因此任何帮助/见解将不胜感激！在我的应用程序的Auth组件（父组件）中，我根据当前的App用户是否具有管理员权限来设置状态。然后，我将此管理状态作为道具传递给三个不同的子组件（{News}，{Resources}和{AdminDashboard}，根据用户的管理状态是否不同，所有这些组件的呈现方式都不同。

这是令人困惑的部分。所有三个子组件都在同一渲染周期内创建。但是，这三个Child组件中的两个正在接收准确且最新的父状态（并因此传递了最新的prop），但是第三个组件似乎正在接收过期的状态值（ null，而不是其他两个接收的true或false），导致传递给它的道具不准确。我可以通过父组件和子组件上的各种console.logs看到对此的确认。我必须忽略一些东西，但我无法弄清楚，因为我认为如果发生重新渲染，则状态会被统一推送到所有需要它的子组件上。我使用确切的代码通过它们各自的Route创建所有三个组件。这是有问题的代码的骨架/模型（为简洁起见，已排除了某些导入，声明等）：

/* AuthWrapper (PARENT component) */

class AuthWrapper extends Component {
 state = {
    admin: null,
  };

componentDidMount() {
 // performs the necessary server-side checks then sets state, ex: if user is an admin then

 this.setState({
   admin: true
 });
}

render() {
 return (

// some other components 

  // News and Resources components are receiving correctly updated props from the state, and are rendering 
  // as expected. Logging their props.admin reveals a true or false value (which is the desired outcome)

  <Route path="/news" render={props => <News {...props} admin={this.state.admin} />} />
  <Route path="/resources" render={props => <Resources {...props} admin={this.state.admin} />} />

// AdminDashboard, on the other hand, is receiving a props admin value of '', as revealed when logging its props.admin property
// This makes the component treat every user like they're not an admin, even if they are. 
// This is not the expected outcome, since this component is being rendered by the same state change as the others

  <Route path="/admindashboard" render={props => <AdminDashboard {...props} admin={this.state.admin} />} />

// some other components 
 )
}


/* AdminDashboard (CHILD component) */

import React, { Component } from "react";
import { Redirect } from "react-router-dom";
import firebase from "../firebase/firebase";
import "firebase/functions";

class AdminDashboard extends Component {
  state = {
    email: null
  };

  handleChange = e => {
    this.setState({
      [e.target.id]: e.target.value
    });
  };

  // add admin cloud function
  handleSubmit = e => {
    e.preventDefault();
    const functions = firebase.functions();
    const addAdminRole = functions.httpsCallable("addAdminRole");
    addAdminRole({ email: this.state.email }).then(result => {
      console.log(result);
    });
  };

  render() {
    // this console.log is returning null, but should be true or false (as it is in other child components)
    console.log(this.props.admin); 
    return this.props.admin ? (
      <div className="container form-container">
        <form
          onSubmit={this.handleSubmit}
          className="center-align admin-actions"
          style={({ margin: "40px auto" }, { maxWidth: "300px" })}
        >
          <input
            onChange={this.handleChange}
            type="email"
            placeholder="User email"
            id="email"
            required
          />
          <button className="btn-small yellow darken-2 z-depth-0">
            Make admin
          </button>
        </form>
      </div>
    ) : (
      <Redirect to="/" />
    );
  }
}

export default AdminDashboard;

我一直在挠头，无济于事！再次感谢任何人对此有任何见解，并在此先感谢！

PS：我知道使用像Redux这样的状态管理工具可以最大程度地减少此类问题，但是目前，我仍在尝试真正理解React的基础知识以及状态如何转移和传递等。

Answer 1

我认为您的问题在这里：