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 и модальное открытие - вот обычный поток я нажимаю на кнопку закрытия, это идет, теперь я щелкаю это всплывающее окно из другого компонента, имеющего prop browseAssetComponent как 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

Делая это,

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

вы только что инициализировали состояние из реквизита. React не синхронизирует c значение this.state.foo для вас с this.props.foo.

Если вы хотите изменить свое состояние при смене реквизита, вы может сделать это в getDerivedStateFromProps .

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

Однако, если вы внимательно прочитаете документ getDerivedStateFromProps , вы обнаружите, что React не рекомендует использовать это Метод в большинстве ситуаций. Из вашего кода я не очень понимаю, почему this.props.browseAssetComponent повлияет на this.state.modalIsOpen. Если вы разместите весь код, я могу дать дальнейшее предложение.

Answer 3

Не определяйте свои реквизиты в состоянии.

Лучше проходить прямо так

<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. Я надеюсь, что это поможет вам.