子 React 组件不会在状态更改时显示

Question

我在使用 REACT 显示第三个组件时遇到问题。

我正在尝试更改工作流的状态，并显示组件三，但我不确定我做错了什么。

单击继续按钮后，状态发生变化。

工作流程更改为 WELCOME_MSG，下面的开关有效。

但我似乎无法返回这个组件“ComponentThree”

case 'WELCOME_MSG': return ();

class ComponentOne extends React.Component {
  constructor(props) {
    super(props)
    this.state = {
      workflow: 'GET_NAME'
    }

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

  setWorkflow() {


    switch(this.state.workflow){
      case 'GET_NAME':
        return (<ComponentTwo/>);
      case 'WELCOME_MSG':
        return (<ComponentThree name={this.state.name} />);
    }

  }

  render() {

    console.log('ComponentOne: ',this.state.workflow );

    return this.setWorkflow();
    /*
      switch(this.state.workflow){
        case 'GET_NAME':
          return (<ComponentTwo/>);
        case 'WELCOME_MSG':
          return (<ComponentThree name={this.state.name} />);
      } */
  }
}

// showThree()



class ComponentTwo extends React.Component {
  constructor(props){
    super(props)
    this.state = {
      workflow: 'GET_NAME',
      name: 'Chris'
    }
    this.handleChange = this.handleChange.bind(this);
    this.handleClick = this.handleClick.bind(this);
    this.setWorkflow = this.setWorkflow.bind(this);
  }

  handleChange(e) {
    //this.setState({name: event.target.name});
    e.persist();



    console.log('handleChange event.target.name:', e.target);


    this.setState((prevState, props) => {
      return {
        name: e.target.value,
        workflow: 'WELCOME_MSG',
      }
    })

    /*
          this.setState(state => ({
          //name: this.state.name,
          name: e.target.value,
          //name: "sadfasdf",
        })); */





  }

  setWorkflow() {


    console.log("setWorkflow", this.state.workflow);
    switch(this.state.workflow){
      case 'GET_NAME':
        return (<ComponentTwo/>);
      case 'WELCOME_MSG':
        return (<ComponentThree />);

    }

    // name={this.state.name}
  }

  handleClick(e) {
    //console.log(this.state);

    //e.preventDefault();

    console.log('BEFORE handleClick this STATE ON CLICK :', this.state.workflow);

    console.log('this.state.name:', this.state.name);


    this.setState((prevState, props) => {
      return {
        workflow: 'WELCOME_MSG',
        name: this.state.name,
      }
    })

    return this.setWorkflow();

    //this.setWorkflow = this.setWorkflow.bind(this);
    /*      this.setState(state => ({
              //name: this.state.name,
              name: this.state.name,
              workflow: 'WELCOME_MSG'
            })); */

    console.log('ON CLICK AFTER SET STATE:', this.state);


    //return (<ComponentThree name={this.state.name} />);


    // e.preventDefault();
  }

  render() {
    //console.log('this is:', this);
    // onChange={this.handleChange}
    return (
      <div>
        <h1>Enter your name</h1>
          <div className="grid20 md-grid100">
            <input type="text" name="fname" value={this.state.name} onChange={this.handleChange} />
          </div>
          <div className="grid80 md-grid100">
            <button onClick={this.handleClick} >Continue</button>
          </div>

      </div>
    )
  }
}

class ComponentThree extends React.Component {
  render() {

    console.log('ComponentThree this is:', this);

    return (
      <div className="test">
        <h1>Hello {this.state.name}</h1>

        <h2>sfasfdadf</h2>
      </div>
    )
  }
}
ReactDOM.render(<ComponentOne />, document.querySelector("#app"))

下面的 JS 小提琴

https://jsfiddle.net/ameshkin/cvg2rjzo/32/

Answer 1

显示 ComponentTwo 或 Three 的状态变量在 ComponentOne 中，但您正在更新 ComponentTwo 中的状态，而不是更新 ComponentOne 中的状态。 要更新 ComponentOne 中的状态，您需要在 props 中传递一个从一到二的函数。

编辑：这是一个工作小提琴https://jsfiddle.net/j5gxovdm/

基本上将状态放在一个地方，而不是分散在所有组件中（保持单一的事实来源）

    return (
        this.state.workflow == 'GET_NAME' 
        ? <ComponentTwo 
            setWorkflow={this.setWorkflow.bind(this)}  
            onChange={(e) => this.setState({name: e.target.value})}
            name={this.state.name}
          /> 
        : <ComponentThree name={this.state.name} />
    ) 

Answer 2

ComponentTwo有自己的状态，该状态在单击按钮时更新，而不是ComponentOne状态。 由于ComponentOne是用于切换ComponentTwo和ComponentThree的容器ComponentThree ，因此您必须将ComponentOne状态作为ComponentTwo和ComponentThree props 传递。

下面的 JS 小提琴

https://jsfiddle.net/richard929/g0b4d3ur/1/