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为假。

所以我只是单击弹出的窗口，然后单击关闭的按钮，现在，我从具有prop browserAssetComponent为true的其他组件中单击此弹出窗口，但没有打开

模态代码如下

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

this.state.modalIsOpen仍然为false，当我从另一个组件调用相同的内容且此弹出窗口没有出现时，不会更新。

如果你们需要更多信息，请告诉我。任何帮助都将成为解决我的障碍的方法

Answer 1

您可以使用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 2

不要在状态中定义道具。

这样最好直接通过

<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 3

这样做，

- FooProduct
 |- WORKSPACE
- BarProduct
 |- WORKSPACE
- BazLibrary
 |- WORKSPACE
- 3rd_party
 |- fftw
   |- WORKSPACE
 |- msgpack
   |- WORKSPACE
 |- zlib
   |- WORKSPACE

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

如果要在更改道具时更改状态，可以在getDerivedStateFromProps中进行。

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

但是，如果您仔细阅读the document of getDerivedStateFromProps，就会发现React不建议在大多数情况下使用此方法。从您的代码中，我不太了解static getDerivedStateFromProps(props, state) { return { foo: props.foo }; }为什么会影响this.props.browseAssetComponent。如果您发布完整的代码，我可以给出进一步的建议。

反应-从其他组件发送道具后，状态未更新

3 个答案: