Question

我正在使用reactjs创建一个多页面应用程序，我正在成功提取数据并将组件加载到每个页面中，但我不确定为什么在离开已安装的页面时会弹出警告。（例如：主页 - ＆gt;比特币，抛出错误只能更新已安装或安装的组件。我想也许我必须卸载组件，但我通过套接字加载数据，而不是设置除状态之外的任何东西。如果是状态，我是否需要清除状态（如果是，如何）？如果没有，可能导致此警告的原因是什么？

这是我目前的代码：

import React, { Component } from 'react';
import socketIOClient from "socket.io-client";
import NumberFormat from 'react-number-format';
import { Link } from 'react-router-dom'

class marketdata extends Component {

  constructor() {
    super();
    this.state = {
      response: {},
      endpoint: "http://127.0.0.1:4001"
      };
    }

  componentDidMount() {
    const { endpoint } = this.state;
    const socket = socketIOClient(endpoint);
    socket.on("message", mi => (
      this.setState({ response: mi }))
    );
  }

  componentWillUnmount() {

  }

  render() {

    const { response } = this.state;
    const coins = response.cc || [];

    return (
      <div className="container">
        <br></br>
          <div className="market_data">
            <h4>
                Market Cap: <NumberFormat value={response.mc} displayType={'text'} thousandSeparator={true} prefix = {'$'} /> |
                24 Hr Volume: <NumberFormat value={response.vol} displayType={'text'} thousandSeparator={true} prefix = {'$'} />
            </h4>
          </div>
          <div className="coin_container">
            <table className="table table-striped table-bordered">
              <thead className="thead-dark">
                  <tr>
                    <th>#</th>
                    <th>Coin</th>
                    <th>Price</th>
                    <th>Market Cap</th>
                    <th>Circulating Supply</th>
                    <th>Change 24Hr</th>
                  </tr>
                </thead>
                  <tbody>
                    {
                      coins.map((coin,i) => (
                        <tr key={i}>
                          <td className="coin_rank">{coin.rank}</td>
                          <td className="coin_link">
                            <img className = "coin_logo" src={require('./logos/' + coin.id + '.png')} alt = {coin.id}/>
                            &nbsp;&nbsp;
                            <Link to={'/coins/' + coin.id}>{coin.name}</Link>
                          </td>
                          <td className="coin_price"><NumberFormat value={coin.price_usd} displayType={'text'} thousandSeparator={true} prefix={'$'} /></td>
                          <td className="market_cap"><NumberFormat value={coin.market_cap_usd} displayType={'text'} thousandSeparator={true} prefix={'$'} /></td>
                          <td className="coin_supply"><strong>{coin.symbol}</strong>&nbsp;&nbsp;<NumberFormat value={coin.available_supply} displayType={'text'} thousandSeparator={true} /></td>
                          <td className="coin_change">{coin.percent_change_24h}%</td>
                        </tr>
                      ))
                    }
                </tbody>
            </table>
          </div>
        </div>
    );
  }
}

export default marketdata;

ReactJS警告：只能更新已安装或安装的组件

0 个答案: