在 React 中将状态从孩子传递给父母，但父母的状态落后于孩子的状态

Question

After trawling various websites including Stackoverflow, I finally figured out how to pass state from child to parent. I have to do it twice since my structure is: <NavButtons> child <Nav> parent <App> grandparent

The idea is to turn a click event into a string in <NavButtons> , save that string to state, pass the state to <Nav> and then pass it along again to <App> which will use the string to update the view. The problem is that although the child state updates immediately on click, the parent state only updates after another click, then the grandparent will only update after yet another click. This seems like very strange behaviour and I can't seem to find a solution anywhere. I feel it is probably due to my poor understanding of the order in which things are happening in the lifecycle methods.

NavButtons (child)

class NavButtons extends React.Component {
  constructor(props) {
    super(props);
    this.state = { active: "" };
    this.handleClick = this.handleClick.bind(this);
  }

  handleClick(num) {
    const btnArr = ["overview", "movement", "distribution"];
    this.setState({ active: btnArr[num] });
    this.props.getState(this.state.active);
  }

  render() {
    console.log("child says " + this.state.active);
    return (
      <div className="button-container">
        <ul className="nav-buttons">
          <li className="overview" onClick={() => this.handleClick(0)}>
            Overview
          </li>
          <li className="movement" onClick={() => this.handleClick(1)}>
            Movement
          </li>
          <li className="distribution" onClick={() => this.handleClick(2)}>
            Distribution
          </li>
        </ul>
      </div>
    );
  }
}

Nav (parent)

class Nav extends React.Component {
  constructor(props) {
    super(props);
    this.state = { navState: "" };
    this.passNavState = this.passNavState.bind(this);
  }

  passNavState(nav) {
    this.setState({ navState: nav });
    this.props.NavStateUpdate(this.state.navState);
  }


  render() {
    console.log("parent says "+this.state.navState)
    return (
      <div className="nav-container">
        <img src={Logo} alt="Tharsus logo" />
        <NavButtons getState={this.passNavState} />
        <DatePicker />
      </div>
    );
  }
}

App (grandparent)

class App extends React.Component {
  constructor() {
    super();

    this.state = {
      appDate: moment().format("1995-12-25", "YYYY-MM-DD"),
      apiData: "",
      navState: ""
    };
    this.getNavState = this.getNavState.bind(this);
  }

  getNavState(nav) {
    this.setState({ navState: nav });
  }

  componentDidMount() {
    const requestData = axios({
      url: "https://tharsus-interview-api-v1.azurewebsites.net/data/2019-10-19",
      method: "get",
      headers: {
        "content-type": "application/json"
      }
    })
      .then(response => {
        this.setState({ apiData: response });
      })
      .catch(err => {
        console.log(err);
      });
  }

  render() {
    console.log("grandparent says " + this.state.navState);
    return (
      <div className="App">
        <Nav NavStateUpdate={this.getNavState} />
        {this.state.navState === "movement" ? (
          <div className="chart-container">
            <MovementDataDisplay
              Data={[3.3176110809420893, 4.18238891905791]}
              Title="Site Hours"
            />
            <MovementDataDisplay
              Data={[3.9176110809420893, 4.18238891905791]}
              Title="Moving Hours"
            />
          </div>
        ) : (
          " "
        )}
      </div>
    );
  }
}

Answer 1

The problem is that setState does not immediately take effect (see docs ). Consider this code fragment of yours:

    this.setState({ active: btnArr[num] });
    this.props.getState(this.state.active);

After setState is called, the state may (and likely will) still have the value of the old state. It will only be updated later. Therefore, when you call this.props.getState(this.state.active) , you are passing the old value of the state.

You could do a quick hack that passes the correct value to both methods, like this:

    const value = btnArr[num]
    this.setState({ active: value });
    this.props.getState(value);

...and that would work, but it's not an elegant way of doing things in React. You are keeping track of the same value in the state of 3 different components, which is not necessary and can get hard to maintain.

If you need the child to use the same value as a parent, I suggest you refactor your code a little bit. Let App keep track of the active navigation element, then pass that value as a prop to the Nav element. From the Nav element, you can also pass the value of the prop to the child elements. Then, all three components are guaranteed to have the same value at all times, and your code will be prettier since you only keep that value in one state.

So you would have:

• An App component that keeps track of the active value, and passes it to Nav , along with a function, setActive , that can be used to change it

• A Nav component that passes on both of these props to its NavButton children

• NavButton child elements that use the active prop to determine if they are active, and call the setActive function whenever they are clicked.

Answer 2

Don't set state in child and parent for navstate, directly pass as arguments in callback till grandparent. Set state only in grandparent and try.