React - 从另一个组件发送道具后状态未更新

Question

我遇到了麻烦

我的BrowseModalUpload 组件中确实有一个弹出窗口，并且我将状态设为

class BrowseModalUpload extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            modalIsOpen: this.props.browseAssetComponent ? this.props.browseAssetComponent : false,
...
}}

所以最初没有弹出窗口，当您单击一个链接时，setState modalIsOpen 为 true 并且模态打开 - 这是正常流程 当我点击关闭窗口时，它 setState modalIsOpen 为假。

所以我只是点击弹出窗口，然后点击关闭按钮，现在我从不同组件中点击这个弹出窗口，将 propbrowseAssetComponent 设置为 true，它没有打开

模态代码是这样的

<Modal transparent isOpen={this.state.modalIsOpen} onAfterOpen={this.afterOpenModal} onRequestClose={this.closeModal} ariaHideApp={false}>

this.state.modalIsOpen 仍然是假的，当我从另一个组件调用它并且这个弹出窗口没有出现时，它不会被更新。

如果你们需要更多信息，请告诉我。 任何帮助都可以解决我的障碍

Answer 1

不要在 state 中定义你的 props。

最好这样直接通过

<Modal transparent isOpen={this.props.modalIsOpen} onAfterOpen={this.afterOpenModal} onRequestClose={this.closeModal} ariaHideApp={false}>

并像这样处理父组件函数

handleModel=()=>{
  this.setState(prev=>({modalIsOpen:!prev.modalIsOpen}));
}

查看此示例https://codesandbox.io/s/model-popup-o1z0p。希望对你有帮助。

Answer 2

您可以使用 componentDidUpdate 生命周期方法，您可以在其中根据道具设置状态。

    class BrowseModalUpload extends React.Component {
            constructor(props) {
                super(props)
                this.state = {
                    modalIsOpen: this.props.browseAssetComponent ? this.props.browseAssetComponent : false,
        ...
        }
        componentDidUpdate(prevProps){
if(this.prevProps.browseAssetComponent != this.props.browseAssetComponent)
        this.setState ({
                    modalIsOpen: this.props.browseAssetComponent ? this.props.browseAssetComponent : false)
        }}
        }

Answer 3

这样做，

constructor(props) {
  this.state = {
    foo: props.foo
  }
}

你刚刚从一个道具初始化了一个状态。 React 不会为你同步 this.state.foo 和 this.props.foo 的值。

如果你想在 props 改变时改变你的状态，你可以在getDerivedStateFromProps.

static getDerivedStateFromProps(props, state) {
 return { foo: props.foo };
}

但是，如果你仔细阅读the document of getDerivedStateFromProps，你会发现 React 不建议在大多数情况下使用这种方法。从您的代码中，我真的不明白为什么this.props.browseAssetComponent 会影响this.state.modalIsOpen。如果您发布整个代码，我可以提供进一步的建议。