Как получить реквизит в componentonentDidMount () дочернего компонента

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

как насчет этого?

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

Answer 2

 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 3

Вы должны удалить ключевое слово async перед методами жизненного цикла в ваших компонентах. Как я могу сказать, вы не используете await нигде внутри них, и + React не предназначен для использования их с функциями async await. Даже если вы хотите использовать componentDidMount для выборки некоторых данных, вы не должны использовать асинхронный режим, поскольку, когда данные поступают, метод извлечения данных будет вызывать метод () для запуска повторного рендеринга компонента.

Попробуйте удалить асинхронный код из вашего кода.