Question

我试图将参数从父组件传递到子组件的ComponentDidMount（）方法。我只能在子组件的render（）中接收道具，而不能将其传递给 ComponentDidMount（）方法。

父组件-Provider.js

  export default class Provider extends Component {
      constructor(props) {
        super(props);
        this.state = {
          carePlan: "",
          patID: ""

        };
      }

      async componentDidMount() {
        this.setState({
          carePlan: this.cp
          patID: this.props.location.state.id
        });
        console.log(this.state.patID);
      }

      render() {
        return (
          <div>
            <Layout>

                  {!this.state.cp ? (
                    <AddCarePlan patID={this.state.patID} />
                  ) : (
                    <div className="carePlan">
                      <DisplayCarePlan cp={this.state.carePlan} />
                    </div>
                  )}

              </Content>
            </Layout>
          </div>
        );
      }
    }

子组件-AddCarePlan.js

class AddCarePlan extends Component {
  constructor(props) {
    super(props);
  }

  async componentDidMount() {
    const patientID = this.props.patID;
    console.log(patientID) // does not show ID
  }



  render() {
    const patientID = this.props.patID;
    console.log(patientID) // shows ID
    return (
      <div>
      <h1> Add Care Plan </h1>
      </div>
    );
  }
}

export default AddCarePlan;

Answer 1

您应该在组件中的生命周期方法之前删除关键字async。正如我可以告诉你的那样，它们内部没有任何地方都没有使用await，并且+ React并非设计为将它们与异步await函数一起使用。即使您想使用componentDidMount进行某些数据提取，也不应使用异步，因为当数据到达时，数据提取上的then（）方法将触发组件的重新渲染。

尝试从代码中删除异步。

Answer 2

该怎么办？

false

Answer 3

 export default class Provider extends Component {
  constructor(props) {
    super(props);
    this.state = {
      carePlan: "",
      patID: props.location.state.id

    };
  }

  async componentDidMount() {
    this.setState({
      carePlan: this.cp
    });
    console.log(this.state.patID);
  }

  render() {
    return (
      <div>
        <Layout>

              {!this.state.cp ? (
                <AddCarePlan patID={this.state.patID} />
              ) : (
                <div className="carePlan">
                  <DisplayCarePlan cp={this.state.carePlan} />
                </div>
              )}

          </Content>
        </Layout>
      </div>
    );
  }
}

尝试这种方式

  this.state = {
      carePlan: "",
      patID: ""

    };

  async componentWillMount() {
    this.setState({
      patID: this.props.location.state.id
    });
  }

或尝试更改生命周期

如何在子组件的compononentDidMount（）中获取道具

3 个答案: