Javascript 在react中更新状态时如何立即更新道具？

我正在创建一个带有父仪表板组件和子模式组件的react应用程序。我在另一个子组件中有一个按钮，我从该按钮单击中获取ID，并在父仪表板组件中启动一个函数。我正在该函数中设置一个状态，并将状态作为道具从父仪表板组件发送到子模态组件，以打开模态并在模态体中显示ID问题是，我需要单击两次以打开模型，并需要单击两次以关闭模式。我知道我需要使用

状态回调

方法，但不确定如何

父仪表板组件：

import ProjectModal from './projectModal';
import Card from './card';

class Dashboard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentId: '',
      open: false
    };
  }

  handleClose = () => {
    this.setState({ open: false });
  };

  getPojectId = (projectId) => {
    this.setState({
      open: true,
      currentId: projectId
    })
  }

  render(){
    return(
      <ProjectModal
         handleOpen={this.state.open}
         handleClosed={this.handleClose}
         projectID={this.state.currentId}
      />
      <Card getCardId={this.getPojectId} />
    )
  }
}

class ProjectModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            open: false,
            currentId: ''
        };
    }

    componentWillReceiveProps() {
        this.setState({
            open: this.props.handleOpen,
            currentId: this.props.projectID
        })
    }

    render() {

        return (
            <div className="projectDetailsModal">
                <Dialog
                    open={this.state.open}
                    keepMounted
                    onClose={this.props.handleClosed}
                    aria-labelledby="form-dialog-slide-title"
                    aria-describedby="form-dialog-slide-description"
                >
                    <div className="modalClose" onClick={this.props.handleClosed}>
                        <span>&times;</span>
                    </div>
                    <DialogContent>
                        <div className="centerModal">
                            <div className="projectFormHeader">ID {this.state.currentId}</div>
                        </div>
                    </DialogContent>
                </Dialog>
            </div>
        );
    }
}

从“/ProjectModal”导入ProjectModal；
从“./卡”导入卡；
类仪表板扩展组件{
建造师（道具）{
超级（道具）；
此.state={
当前ID:“”，
开放：假
};
}
handleClose=（）=>{
this.setState（{open:false}）；
};
getPojectId=（projectId）=>{
这是我的国家({
开放：是的，
currentId:projectId
})
}
render（）{
返回(
)
}
}

子模态组件：

import ProjectModal from './projectModal';
import Card from './card';

class Dashboard extends Component {
  constructor(props) {
    super(props);
    this.state = {
      currentId: '',
      open: false
    };
  }

  handleClose = () => {
    this.setState({ open: false });
  };

  getPojectId = (projectId) => {
    this.setState({
      open: true,
      currentId: projectId
    })
  }

  render(){
    return(
      <ProjectModal
         handleOpen={this.state.open}
         handleClosed={this.handleClose}
         projectID={this.state.currentId}
      />
      <Card getCardId={this.getPojectId} />
    )
  }
}

class ProjectModal extends Component {
    constructor(props) {
        super(props);
        this.state = {
            open: false,
            currentId: ''
        };
    }

    componentWillReceiveProps() {
        this.setState({
            open: this.props.handleOpen,
            currentId: this.props.projectID
        })
    }

    render() {

        return (
            <div className="projectDetailsModal">
                <Dialog
                    open={this.state.open}
                    keepMounted
                    onClose={this.props.handleClosed}
                    aria-labelledby="form-dialog-slide-title"
                    aria-describedby="form-dialog-slide-description"
                >
                    <div className="modalClose" onClick={this.props.handleClosed}>
                        <span>&times;</span>
                    </div>
                    <DialogContent>
                        <div className="centerModal">
                            <div className="projectFormHeader">ID {this.state.currentId}</div>
                        </div>
                    </DialogContent>
                </Dialog>
            </div>
        );
    }
}

类ProjectModal扩展组件{
建造师（道具）{
超级（道具）；
此.state={
开：错，
当前ID:“”
};
}
组件将接收道具（）{
这是我的国家({
打开：this.props.handleOpen，
currentId:this.props.projectID
})
}
render（）{
返回(
&时代；
ID{this.state.currentId}
);
}
}

如何尝试使用

newProps

参数

componentWillReceiveProps(newProps) {
  if (newProps.handleOpen !== this.props.handleOpen) {
       this.setState({
            open: this.props.handleOpen,
            currentId: this.props.projectID
        })
  }
 }

---

当前值为

this.props.handleOpen

，新更改的值为

newProps.handleOpen

如何尝试使用

newProps

参数

componentWillReceiveProps(newProps) {
  if (newProps.handleOpen !== this.props.handleOpen) {
       this.setState({
            open: this.props.handleOpen,
            currentId: this.props.projectID
        })
  }
 }

---

当前值为

this.props.handloopen

，新更改的值为

newProps.handloopen
您应该避免使用
组件WillReceiveProps
，不鼓励使用它。另一方面，将
道具
复制到
状态
是一种反模式，在您的代码中不需要这样做

在仪表板组件中，尝试以下操作：


建造师（道具）{
超级（道具）；
此.state={
当前ID:“”，
开放：假
};
this.handleClose=this.handleClose.bind（this）；

而且，在你的模态中，首先移除状态，你不需要在这个组件中，它是纯的。在那之前，将你所有的
this.State
更改为
this.props
你应该避免使用
组件willreceiveprops
，它的使用是不被鼓励的。另一方面，将
props
复制到
状态是一种反攻击恩，在你的代码里没有必要这么做

在仪表板组件中，尝试以下操作：


建造师（道具）{
超级（道具）；
此.state={
当前ID:“”，
开放：假
};
this.handleClose=this.handleClose.bind（this）；

而且，在模态中，首先删除状态，您不需要在这个组件中使用它，它是纯的。在此之前，将所有的
this.State
更改为
this.props
“Ilsanchez”是正确的。另外，您不需要将“Child-Modal”作为类组件，它只能起作用。
“Ilsanchez”是的。另外，您不需要将“Child modal”作为类组件，它可能只起作用。
为什么在两种组件状态下都有open？您将道具复制到Child中的状态的具体原因是什么？考虑到除了将道具复制到该状态之外，您似乎不需要对该状态执行任何操作。您可以使用通过简单地更改
@applepeaperson，我就明白了你的意思。我可以用道具处理所有数据，而不是将它们复制到状态。为什么在两种组件状态下都打开了？你将道具复制到孩子的状态有什么具体原因吗？考虑到除了将道具复制到状态之外，你似乎没有对状态做任何事情，似乎没有必要。你可以通过简单地更改
@applepeaperson来使用孩子中的道具。我明白你的意思。我可以用道具处理所有数据，而不是将它们复制到状态