时间戳

首页 > 解决方案 > Reactjs绑定问题

javascript - Reactjs绑定问题

问题描述

如何在 ReactJs 中从 signalR 请求和接收数据并在 ComponentDidMount 中绑定数据我正在使用 react 框架来设计带有 SignalR 的视图。我能够连接到 SignalR 服务器并获取数据，但如果我需要在视图上加载数据，我将无法在 ComponentDidMount 上加载数据。如果我请求 ComponentDidMount 视图上的数据显示为空白。在视图加载时，我提到了一个图标 (i) 并在视图加载后单击，然后数据被绑定。

import React, { Component } from 'react';
import { Button, Card, CardBody, CardFooter, CardHeader, Col, Row, Collapse, Fade } from 'reactstrap';
import {Redirect} from 'react-router-dom';
import {hub} from '../../SignalRHub';
class Users extends Component {
    constructor(props) {
        super(props)
        this.state = {
            userId:0,
            userName:'',
            usersList:[]
        };
    }
LoadUsersList()
{
    this.refs.child.userListRequest();
}
receiveUserList(userlist)
{
    this.setState({usersList: userlist});
}
render(){
    if(this.state.redirecttoUsers)
    {
        const route='/UsersInfo/'+this.state.userId;
        return (<Redirect to={route} />)
    }
    return (
        <form onSubmit={this.handleSubmit}>

            <div className="animated fadeIn">

                <SignalRHub ref="child" receiveUserList={this.receiveUserList.bind(this)} />

                <a href="#" className="card-header-action btn btn-setting" onClick={(event)=>this.LoadUsersList(event)}><i className="fa fa-info-circle"></i></a>

                <Row>

                    {this.state.usersList.map((e, key) => {

                        return (

                            <Col className="col-3 .col-sm-3">

                                <div class="container">

                                    <Card className="border-primary crd" onClick={(event)=>this.userFingerInfoHandle(event,e)}>

                                        <CardHeader>

                                            {e.userName}

                                            <div className="card-header-actions middle upper">

                                                <a href="#" className="card-header-action icon btn btn-setting" onClick={(event)=>this.userFingerInfoHandle(event,e)}><i className="fa fa-info-circle"></i></a>

                                                <a className="card-header-action img btn btn-setting" onClick={(event)=>this.userRemovalHandle(event,e.id)}><i className="fa fa-trash"></i></a>

                                            </div>

                                        </CardHeader>

                                        <CardBody align="center">

                                            {e.userName}

                                        </CardBody>

                                    </Card>

                                </div>

                            </Col>

                        )})

                    }

                </Row>

            </div>

        </form>

    );
};
}
   export default Users;

标签： javascriptreactjs

解决方案

在使用中更新状态componentDidMount并引用所有必要的数据renderthis.state

原因很简单。 React决定在默认情况下更改props或时更新 DOM 树state，因此只有更改其中任何一个才能更新渲染，除非您实现自己的shouldComponentUpdate

推荐阅读