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或在AlertService组件中定义具有所需状态的state = {};类属性。

Answer 1

不应从组件外部调用

setState。如果要从外部更改状态，请使用props。

正如错误消息所示，组件未安装。您可以通过将<AlertService />添加到布局来安装它。

Answer 2

如果我理解正确你说你试过从另一个组件调用setAlert，它就不起作用但是当你调用closeMessage时它按预期工作，但后来我注意到你打电话给{ {1}}在同一组件中可以按预期工作，如果你想在另一个组件中调用属于这个组件的函数，那么你需要将组件导入到这个组件中，然后将函数传递给它，这样你就能够调用组件中的函数。例如：

closeMessage

Answer 3

正如您在其中一条评论中提到的那样，在实例化AlertService类之后，您试图调用setAlert函数，我建议您先看看您是如何做到这一点的。正确的方法是：

this.AlertService = React.render（React.createElement（AlertService），mountnode）//安装组件 this.AlertService.setAlert（）//现在你可以调用函数

根据您的用例，您可以像上面那样。

反应的是父组件无法调用子组件的方法。因为那些是儿童私生子的，因此应该自己处理。虽然我们可以使用refs来调用子组件的方法，但这不是refs的推荐用例。这可能会导致您的应用程序中出现错误。

实现@vijayst建议的目的的最佳方法是在警报上更改父组件的状态（每当收到消息时）并将其作为道具传递给孩子。现在更新componentWillReceiveProps（）下的子状态。

无法在react组件中使用setState

3 个答案: