反应组件仅显示一个数据

Question

我将放弃这种希望有人能提供帮助的希望。我有一个与我的app.js一起使用了3次的react组件我希望数据通常显示在一个中，并通过其他两个函数过滤。我显示和隐藏面板的方式有点原始，但是现在就可以了。目前发生的情况是，第一个选项卡显示的数据来自我拥有的套接字服务器，其他两个选项卡则不显示任何内容。

这是我的组件：

import React, { Component } from 'react';
import './App.scss';
import { subscribeToTimer } from './api';
import Board from './components/Board';
import Stream from './components/orderStream';

class App extends Component {
  constructor(props) {
    super(props);
    subscribeToTimer((err, Order) => this.setState(
      state => ({
      Orders: [...state.Orders, Order] ,
      OrdersCr: [...state.OrdersCr, Order] ,
      OrdersCo: [...state.OrdersCo, Order] ,
    })));
  }

  showBoard(board){
    let a = document.getElementsByClassName('history-board')[0];
    let b = document.getElementsByClassName('created-board')[0];
    let c = document.getElementsByClassName('cooked-board')[0];

    if (board ==="history") {
      console.log(board);
      a.classList.add('show');
      a.classList.remove("hidden");
      b.classList.add('hidden');
      b.classList.remove("show");
      c.classList.add('hidden');
      c.classList.remove("show");
    }
    if (board === "created") {
      console.log(board);
      a.classList.remove("show");
      a.classList.add('hidden');
      b.classList.remove("hidden");
      b.classList.add('show');
      c.classList.add('hidden');
      c.classList.remove("show");
    }

    if (board === "cooked") {
      console.log(board);
      a.classList.add('hidden');
      a.classList.remove("show");
      b.classList.add('hidden');
      b.classList.remove("show");
      c.classList.add('show');
      c.classList.remove("hidden");
    }
  }

  state = {
    Orders: [],
    OrdersCr: [],
    OrdersCo: []
  };
  render() {
    const { Orders, OrdersCr, OrdersCo } = this.state;
    return (
      <div className="App">
        <Stream/>
        <div className="filters">
            <div>
              <button className="history" href="#" onClick={() => { this.showBoard("history")}}>
                History
              </button>
            </div>
            <div>
              <button className="created" href="#" onClick={() => { this.showBoard("created")}}>
                filter By Cooking
              </button>
            </div>
            <div>
              <button className="cooked" href="#" onClick={() => { this.showBoard("cooked")}}>
                filter By Cooked
              </button>
            </div>
          </div>
        <div className="history-board">
          <Board 
          Filter ={'history'}
          Orders = {Orders}
          />
        </div>
        <div className="created-board hidden">
          <Board 
          Filter = {'Created-history'}
          Orders = {OrdersCr}
          />
        </div>
        <div className="cooked-board hidden">
          <Board 
            Filter = {'Cooked-history'}
            Orders = {OrdersCo}
          />
        </div>
      </div>  
    );
  }
}

export default App;

import React, { Component } from 'react'
import Card from '../components/Card'


class Board extends Component {


    constructor(props){
      super(props);
      this.renderTableRows= this.renderTableRows.bind(this);
      this.filterBy = this.filterBy.bind(this);
    }

    filterBy(event,order){
      console.log('hey hey',order,event);
      var filtered = [];
      for (var i = 0; i < order.length; i++) {
          if (order[i].event_name === event) {
              filtered.push(order[i]);
          }
          if (order[i].event_name !== event){
            filtered.splice(i,1);
          }
      }
      console.log('here', filtered);
      return filtered.map(order => (
        <Card
          key = {order.id}
          ID = {order.id}
          Name ={order.name}
          Status ={order.event_name}
          Time = {order.sent_at_second}
          Destination ={order.destination}
        />
      ));
    }

    renderTableRows(){
      let order = this.props.Orders;
      // console.log(this.props);
      if (this.props.Filter !== "history" ) {
        this.filterBy(order,this.props.Filter);
      } else {
        //massage data
          if (order.length > 2 ) {
            let element  = order[order.length-1];
            for(var i = 0; i < order.length; i++) {
                if (order[i].id === element.id) {
                    order[i]=element;
                }
            }
          }
          return order.map(order => (
            <Card
              // key = {order.id}
              ID = {order.id}
              Name ={order.name}
              Status ={order.event_name}
              Time = {order.sent_at_second}
              Destination ={order.destination}
            />
          ));
        }
      }





    render() {
        return (
          <div>
          <div className="main-board flex-grid">
            <div id='resp-table'>
              <div id='resp-table-header'>
                <div className='table-header-cell order-ID'>
                  Order ID
                </div>
                <div className='table-header-cell order-name'>
                  Order Name
                </div>
                <div className='table-header-cell order-status'>
                  Status
                </div>
                <div className='table-header-cell order-time'>
                  Time
                </div>
                <div className='table-header-cell order-destination'>
                  Destination
                </div>
              </div>
              <div id='resp-table-body'>
                { this.renderTableRows(this.props)}
              </div>
            </div>
          </div>
          </div>
        )
    };
}

export default Board;

来自套接字的数据看起来像这样

[
{
"id": "71xz0"
"name": "Cheese Pizza",
"event_name": "DRIVER_RECEIVED",
"sent_at_second": 123,
"destination": "1041 S Fairfax Ave, Los Angeles, CA 90019"
},
...
]

谢谢你，你是我唯一的希望。

Answer 1

此行上的参数放置顺序不正确

this.filterBy(order,this.props.Filter);

应该是：

this.filterBy(this.props.Filter, order);

Answer 2

好的，我还不太了解您的问题，但是我想在这里提出一些建议

在您的App组件中，您具有构造函数和类state属性以初始化状态，我认为您可以像现在一样将subscriptionToTimer转换为componentDidMount并初始化状态

componentDidMount() {
   subscribeToTimer((err, Order) => this.setState(
  state => ({
  Orders: [...state.Orders, Order] ,
  OrdersCr: [...state.OrdersCr, Order] ,
  OrdersCo: [...state.OrdersCo, Order] ,
  })));
}

并且现在不需要构造函数，只需要声明为>>

 state = {
  Orders: [],
  OrdersCr: [],
  OrdersCo: []
 };
并且在您要调用filterBy方法的Board组件中，您传递的参数没有以正确的顺序传递为]]
this.filterBy(this.props.Filter, order); // Filter first and order array second
另一件事是，当您可以并且正在使用您的方法访问this.props时，无需像在这里那样将this.props传递给您的类方法
{ this.renderTableRows(this.props)} // no need to pass 
希望有帮助