Question

使用REACT出现第三个组件时出现问题。

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

单击继续按钮后，状态会更改。

工作流程更改为WELCOME_MSG，下面的开关起作用。

但是我似乎无法返回此组件“ ComponentThree”

案例“ 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中的状态，您需要在道具中将函数从1传递到2。

编辑： 这是一个有效的小提琴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的容器组件，因此您必须传递ComponentOne状态作为ComponentTwo和ComponentThree的道具。

下面的JS小提琴

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

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

2 个答案: