ReactJS:setState无法在Syncfusion中工作

我使用Syncfusion React Toast和singnalr向用户显示弹出通知。但在使用信号器从服务器获取数据并使用获取的值设置消息状态后，toast内容将显示它在构造函数中分配的初始值

import React, { Component } from 'react';
import { ToastComponent } from '@syncfusion/ej2-react-notifications';
import * as signalR from '@aspnet/signalr';


class Notification extends ToastComponent {

        constructor() {
            super(...arguments);
            this.position = { X: 'Right', Y: 'Top' }
            this.state = { message: '555'}

        }

        toastCreated() {
            this.toastInstance.show({ timeOut: 0 })

        }

        componentDidMount() {
            const notifConn = new signalR.HubConnectionBuilder().withUrl("/notif").build();

            notifConn.on("ReceiveMessage",(msg) => {
                this.setState({ message: msg });
            });
            notifConn.start().then(function () {
                notifConn.invoke("SendNotification");

            }).catch(function (er) {
                console.log(er.toString());
            });

        }


        render() {
            return (
                <div>
                    <ToastComponent 
                       id='toast_target'
                       ref={toast => this.toastInstance = toast}
                       title={this.state.message}//it shows 555!!!
                       content={this.state.message} //it shows 555!!!
                       position={this.position}    
                       showCloseButton
                       created={this.toastCreated = this.toastCreated.bind(this)}
                    />

                </div>
                   );
        }
    }

    export default Notification;

---

来自Syncfusion支持部门的问候

默认情况下，我们无法动态修改现有显示祝酒词的内容。动态更改的内容将显示在“通知下一次祝酒”上

因此，我们建议您隐藏上一个吐司，并在setState之后显示下一个吐司

请查找以下代码以供参考

Chat.js

我们已经为带有react toast组件的ASP.NET核心信号器创建了示例

样本：

请查找以下步骤以运行上述示例

在aspnetcoresigner_React.Client文件夹内导航并输入 “npm安装”。 通过输入“npm Start”启动客户端应用程序。 运行aspnetcoresigner_React.Server项目。 如果上述解决方案不符合您的要求，请发送以下详细信息

有没有理由使用静态祝酒和动态内容更新？ 问候,

---

Narayanasamy p.

是否执行notifConn.on？你能在里面打印消息吗？是的…console.log printed msgTry this.setState{message:msg}，=>console.logthis.state.message，如果它打印新的状态，那么你的setState工作正常，问题是别的。

constructor(props) {
super(props);

this.state = {
    message: '',
};
componentDidMount = () => {
    const nick = window.prompt('Your name:', 'John');

    const hubConnection = new HubConnection('http://localhost:5000/chat');

    this.setState({ hubConnection, nick }, () => {
        …………..
        this.state.hubConnection.on('sendToAll', (nick, receivedMessage) => {
            this.setState({ message: receivedMessage }); // Change the toast content using state
            this.toastObj.hide(); // You can hide the toast
            this.toastObj.show(); // You can show the toast
        });
    });
};

create = () => {
    this.toastObj.show({ timeOut: 0 });
}

<ToastComponent ref={ (toast) => { this.toastObj = toast; } } content = { this.state.message } id = 'toast_default' created = { this.create.bind(this) } > </ToastComponent>