無法在React組件中使用setState

Question

我有以下代碼，在掛載后不讓我設置狀態。

這是代碼

    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組件中具有所需狀態的class屬性。

Answer 1

setState不應從組件外部調用。 如果要從外部更改狀態，請使用道具。

並且如錯誤消息所述，未安裝該組件。 您可以通過在布局中添加<AlertService />來安裝它。

Answer 2

如果我理解正確，您說過您嘗試從另一個組件調用setAlert ，則它不起作用，但是當您調用closeMessage它可以按預期運行，但是隨后我注意到您在同一組件中調用了closeMessage ，如果需要，它可以按預期運行要調用另一個組件中屬於該組件的函數，則需要將該組件導入該組件，然后將該函數傳遞給它，以便能夠在該組件中調用該函數。 例如：

import AnotherComponent from '../AnotherComponenet'

<AnotherComponent setAlert={this.setAlert} />

Answer 3

正如您在其中一條注釋中提到的，您要在實例化AlertService類之后嘗試調用setAlert函數，我建議您看一下如何執行此操作。 正確的方法是：

this.AlertService = React.render（React.createElement（AlertService），mountnode）//安裝組件this.AlertService.setAlert（）//現在可以調用該函數

根據您的用例，您可以執行上述操作。

react的作用是子組件的方法不能被父組件調用。 因為這些是對孩子私人的，因此應該自己處理。 作為一種技巧，盡管我們可以使用引用來調用子組件的方法，但這不是推薦的引用用例。 這可能會導致應用程序中的錯誤。

實現@vijayst建議的最佳方法是在警報上更改父組件的狀態（每當收到消息時），並將其作為道具傳遞給孩子。 現在，在componentWillReceiveProps（）下更新子狀態。