Question

如何从signalR请求和接收数据以及如何在ReactJs中的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;

Answer 1

更新componentDidMount中的状态，并使用render引用this.state中所有必要的数据

原因很简单。 React决定在默认情况下更改props或state时更新DOM树，因此，除非您实现自己的{{1 }}

Reactjs绑定问题

1 个答案: