Невозможно использовать setState в компоненте реакции

У меня есть следующий код, который не позволяет мне установить состояние после монтирования.

Вот код

    import React, { Component } from 'react';
import Messages from '../locale/en/Messages';
import '../styles/base.css';

class AlertService extends Component {
    state = {
        message: '',
        classType: 'alert-info',
        isMessageSet: false
    }

    Messages = new Messages();

    componentDidMount = () => {
        console.log('This has mounted'); // This is working
    }
    componentWillUnmount = () => {
        console.log('Is this getting unounted ?'); // This is working, the component is not getting unmounted
    }
    setAlert = (key, type, isMessage, readMore) => {
        let message = isMessage ? key : this.Messages[key];
        let classType = 'alert-info';
        if (type === 0) {
            classType = 'alert-danger';
        } else if (type === 1) {
            classType = 'alert-success';
        }
        this.openMessage(message,classType);


    }
    openMessage = (message,classType) =>{
        this.setState({
            message: message,
            classType: classType,
            isMessageSet: true
        });
    }
    closeMessage = () => {
        this.setState({
            message: '',
            classType: 'info',
            isMessageSet: false
        });
    }
    render() {
        let classes = this.state.classType + ' ' + 'alertBox';
        return (this.state.isMessageSet ? 

                                        <div className={classes}>
                                           <div className="col-md-11"> {this.state.message} </div>
                                           <div className="col-md-1 closeAlert" onClick={this.closeMessage}> x </div>


                                        </div>

                                : null
        )
    }
}
export default AlertService;

Я получаю следующую ошибку при попытке вызвать функцию setAlert вне этого компонента. Однако, если я устанавливаю для свойства isMessageSet значение true, то при нажатии X и вызове метода closeAlert все работает нормально.

componentDidMount указывает, что компонент монтируется, а componentWillUnmount никогда не выполняется, я не уверен, что здесь не так

Сообщение об ошибке Невозможно вызвать setState для еще не смонтированного компонента. Это недопустимо, но может указывать на ошибку в вашем приложении. Вместо этого назначьте this.state напрямую или определите свойство класса state = {}; с желаемым состоянием в компоненте AlertService.


react-native reactjs javascript setstate components
person Mitesh Pant    schedule 17.06.2018    source источник
comment
Что вы подразумеваете под этим компонентом?   -  person devserkan    schedule 17.06.2018
comment
Я вызываю функцию setAlert этого компонента из другого компонента, когда отображается сообщение, создавая экземпляр класса AlertService.   -  person Mitesh Pant    schedule 17.06.2018
comment
О, есть такой вариант использования. Хорошо, тогда не заморачивайтесь с моим вопросом.   -  person devserkan    schedule 17.06.2018
comment
Где вы называете это вне компонента???   -  person Shubhanu Sharma    schedule 17.06.2018

Ответы (3)


arrow_upward
0
arrow_downward

Как вы упомянули в одном из комментариев, что вы пытаетесь вызвать функцию setAlert после создания экземпляра класса AlertService, я предлагаю вам посмотреть, как вы это делаете. Правильный способ:

this.AlertService = React.render(React.createElement(AlertService), mountnode) //монтирует компонент this.AlertService.setAlert() // теперь можно вызвать функцию

В зависимости от вашего варианта использования вы можете сделать, как указано выше.

Дело в том, что методы дочернего компонента не могут быть вызваны родительским компонентом. Поскольку они предназначены для частного использования ребенком и поэтому должны обрабатываться сами по себе. В качестве хака мы можем использовать refs для вызова методов дочернего компонента, но это не рекомендуемый вариант использования refs. Это может привести к ошибкам в вашем приложении.

Лучший способ достичь цели, предложенной @vijayst, - изменить состояние вашего родительского компонента в предупреждении (всякий раз, когда получено сообщение) и передать его в качестве опоры дочернему элементу. Теперь обновите состояние дочернего элемента в componentWillReceiveProps().

person raj    schedule 17.06.2018
comment
большое спасибо, компонентWillReceiveProps сделал всю работу за меня - person Mitesh Pant; 18.06.2018

arrow_upward
1
arrow_downward

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

И, как говорится в сообщении об ошибке, компонент не смонтирован. Вы можете смонтировать его, добавив <AlertService /> в макет.

person vijayst    schedule 17.06.2018

arrow_upward
0
arrow_downward

Если я вас правильно понял, вы сказали, что пытались вызвать setAlert из другого компонента, он не работает, но когда вы вызвали closeMessage, он работает, как и ожидалось, но затем я заметил, что вы вызвали closeMessage в этом же компоненте, который будет работать, как и ожидалось, если вы хотите чтобы вызвать функцию, принадлежащую этому компоненту, в другом компоненте, вам нужно импортировать компонент в этот компонент, а затем передать ему функцию, чтобы вы могли вызывать функцию в компоненте. Например:

import AnotherComponent from '../AnotherComponenet'

<AnotherComponent setAlert={this.setAlert} />
person Rukayat Odukoya    schedule 17.06.2018