Reactjs 在何处设置来自子组件中父组件的道具值？

我在一个网站上有一个主屏幕/页面，其中有很多表单，这些表单都具有添加/编辑操作的功能。在编辑过程中，我看到了api调用时出现的问题，在数据来自api后，我必须在模式弹出窗口中预填充各自表单字段中的数据。但我面临的问题是，如何设置子项在模态打开之前，使用来自父组件的道具来显示组件的状态，以便可以在模态中查看数据并进行编辑。我很困惑，我应该在哪里做设置状态？（我已经尝试了模态的onOpened行为，但是设置状态是同步的，所以我面临一些问题，我应该在componentDidMount还是在哪里做？） 这是我工作的链接

父组件

import React，{Component}来自“React”；
从“react dom”导入react dom；
从“/modal”导入ModalComponent；
导入“bootstrap/dist/css/bootstrap.min.css”；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
此.state={
OpenModel:错误，
姓名：“
};
}
toggleModal=（）=>{
this.setState（{openModal:！this.state.openModal}）；
};
render（）{
console.log（“从索引渲染”）；
返回(
开放模态
);
}
}
const rootElement=document.getElementById（“根”）；
render（，rootElement）；

子组件

import React，{Component}来自“React”；
导入{Modal，ModalHeader，ModalBody，FormGroup，Input，Col，Label}
从“反应带”；
类ModalComponent扩展组件{
建造师（道具）{
超级（道具）；
此.state={
姓名：“
};
}
handleInput=e=>{
常量{name，value}=e.target；
this.setState（{[name]：value}）；
};
render（）{
console.log（“从模式渲染”）；
返回(
标题
api调用后来自父状态的名称
);
}
}
导出默认ModalComponent；

在您将拥有的子组件中

componentWillReceiveProps(nextProps) {
    this.setState({name: nextProps.name})
  }

---

但在较新版本的React中，这将替换为

getDerivedStateFromProps

您可以了解有关getDerivedStateFromProps的更多信息

这将起作用，但请记住，

componentWillReceiveProps

在最新的React版本中被删除。改为使用

getDerivedStateFromProps

。@MithunGS我已经提到过，但在React的更新版本中，它将被getDerivedStateFromProps替换。您可以了解有关getDerivedStateFromProps的更多信息

    import React, { Component } from "react";
    import {Modal,ModalHeader,ModalBody,FormGroup,Input,Col,Label} 
       from "reactstrap";

    class ModalComponent extends Component {
      constructor(props) {
        super(props);
        this.state = {
          name: ""
        };
      }

      handleInput = e => {
        const { name, value } = e.target;
        this.setState({ [name]: value });
      };

      render() {
        console.log("render from modal");
        return (
          <div>
            <Modal
              isOpen={this.props.openModal}
              onOpened={this.onModalOpened}
              toggle={this.props.toggleModal}
            >
              <ModalHeader toggle={this.props.toggleModal}>Header</ModalHeader>
              <ModalBody>
                <FormGroup row>
                  <Label col-8>Name from Parent state after api call</Label>
                  <Col col-4>
                    <Input
                      type="text"
                      name="name"
                      value={this.state.name}
                      onChange={this.handleInput}
                    />
                  </Col>
                </FormGroup>
              </ModalBody>
            </Modal>
          </div>
        );
      }
    }

    export default ModalComponent;

componentWillReceiveProps(nextProps) {
    this.setState({name: nextProps.name})
  }