Question

我想要的是什么：

我有一个node.js服务器，一个captor和一个react.js客户端。每次捕获者检测到某些内容时，它会通过socket.io向我的节点服务器发送一条消息，该消息将数据返回到我的React网站（使用JSON）。

我希望每次我的客户端React.js从我的服务器接收到新数据时，它会自动刷新指定的组件（通常是图表）。

我的代码：

Index.jsx

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {data: []};
    socket.on('dataCards', function (cards) {
      this.state = {data: cards};
    });
  }
  render () {
    return (
      <div className="container-fluid">
        <NavBarTop />
        <div className="row">
          <NavFilter />
          <div className="col-sm-7-5 col-md-7-5" id="mainPage">
            <DataAnalytics />
            <CardsList data={this.state.data} />
          </div>
          <Interventions />
        </div>
      </div>
    );
  }
}
render(<App />, document.getElementById('container'));

cardlist.jsx：

import React from 'react';

class Card extends React.Component {
  constructor(props) {
    super(props);
  }

  rawMarkup() {
    var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
    return { __html: rawMarkup };
  }

  render() {
    return (
      <div className="ticket">
        <h2 className="cardUID">
          {this.props.uid}
        </h2>
        <span dangerouslySetInnerHTML={this.rawMarkup()} />
      </div>
    );
  }
}

export default Card;

我对React.js的生命周期并不十分熟悉。不幸的是，在数据到达我的客户端之前调用了render。所以当调用cardlist.jsx时，props.data为null。

我不知道如何构建我的代码来做我想要的......

任何人都可以帮助我？

Answer 1

第一次使用渲染时不会有数据。在此期间只需要加载一个加载指示器。您应该在componentDidMount或componentWillMount中加载数据。

Answer 2

您需要使用setState函数来更新您的状态。它会触发您的组件的重新渲染。使用＆＃34; this.state =某事＆＃34;仅设置组件的初始状态。

socket.on('dataCards', (cards) => {
    this.setState({data: cards});
});

您可能希望使用componentWillMount或componentDidMount生命周期挂钩来侦听socket.io并停止侦听componentWillUnmount挂钩。

componentDidMount() {
    socket.on('dataCards', (cards) => {
        this.setState({data: cards});
    });
}

componentWillUnmount() {
    socket.off('dataCards');
}

你的卡组件对我来说也很奇怪。但是我没有关于你的代码的详细信息来提供一些建议。

更新数据时的React.js生命周期

2 个答案: