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

Question

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

父组件-提供程序。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

 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
    });
  }

或者尝试改变生命周期

Answer 2

试试这个怎么样？

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

Answer 3

您应该在组件的生命周期方法之前删除关键字异步。正如我可以告诉你的，没有使用它们内部的等待，反应也不是为了使用异步等待功能而设计的。即使你想使用组件获取数据，你也不应该使用异步，因为当数据到达时，数据获取的（）方法会触发组件重渲染。

尝试从代码中删除async。