javascript - 用新传入的数据 react 添加新行

Question

我已经尝试这个很长时间了，这让我发疯。我有一个使用套接字 io 从套接字接收订单(数据)的应用程序。我获取数据并更新 app.js 中的状态我有我的应用程序。像这样的js

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({ 
      Order 
    }));
  }
  state = {
    Order: 'no orders yet'
  };
  render() {
    console.log('STATE',this.state)
    return (
      <div className="App">
        <Stream
          OrderName = {this.state.Order.name}
          OrderEvent = {this.state.Order.event_name}
        />
        <Board 
         Order = {this.state.Order}
        />

      </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.state = {
      }

    }

    renderTableRows(order){
      return(
        <Card
          ID = {order.id}
          Name ={order.name}
          Status ={order.event_name}
          Time = {order.sent_at_second}
          Destination ={order.destination}
        />
      );
    }

    render() {
        return (
        <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.Order)}
            </div>
          </div>
        </div>
        )
    };
}

export default Board;

这是卡片组件

import React, { Component } from 'react'


class Card extends Component{

  constructor(props){
    super(props);

  }

  render() {
    // console.log("this",this.props);
      return <div className="resp-table-row">
        <div className='table-body-cell'>
            {this.props.ID}
          </div>
          <div className='table-body-cell'>
            {this.props.Name}
          </div>
          <div className='table-body-cell'>
            {this.props.Status}
          </div>
          <div className='table-body-cell'>
           {this.props.Time}
          </div>
          <div className='table-body-cell'>
            {this.props.Destination}
          </div>
      </div>
    }
}

export default Card;

有人可以提供一些见解吗？

Answer 1

React 从模态(数据)创建 View 。在您的情况下，您希望 View 包含所有收到的订单。为此，您需要将订单保存在状态的数组中(在 App 组件中)，并将它们提供给呈现 View 的组件 (Board) 。需求Board需要迭代数组，并生成Card组件列表。

App 组件应将所有收到的订单存储在数组中:

class App extends Component {
  constructor(props) {
    super(props);
    subscribeToTimer((err, Order) => this.setState(state => ({ 
      Order: [...state.Order, order] // add the Order to the previous state.Order
    })));
  }
  state = {
    Order: [] // init order with an empty array
  };
  render() {
    const { Order } = this.state;
    const { name, event_name } = Order[order.length - 1] || {}; // get the names from the laster order - or undefined if none
    return (
      <div className="App">
        <Stream
          OrderName = {name}
          OrderEvent = {event_name}
        />
        <Board 
         Order = {this.state.Order}
        />

      </div>  
    );
  }
}

只要添加一个表格板，Board 组件就应该渲染整个表格板数组:

renderTableRows(order){
  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}
    />
  ));
}