Javascript 使用新的传入数据添加新行

我已经尝试了很长时间，这让我发疯。 我有一个应用程序，它使用套接字io从套接字接收订单（数据）。 我在app.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}来自'React'；
导入“/App.scss”；
从“./api”导入{subscribeTimer}；
从“./组件/板”导入板；
从“./components/orderStream”导入流；
类应用程序扩展组件{
建造师（道具）{
超级（道具）；
subscribeToTimer（（err，Order）=>this.setState（{
命令
}));
}
状态={
订单：“还没有订单”
};
render（）{
console.log（'STATE'，this.STATE）
返回(
);
}
}
导出默认应用程序；

现在，在我的板中，我希望它在每次输入新数据时创建一个新行（卡）。 我所能做的就是显示行，但用新数据重新渲染它。 我希望在收到订单时填充我的表格

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}来自“React”
从“../components/Card”导入卡
类板扩展组件{
建造师（道具）{
超级（道具）；
this.renderTableRows=this.renderTableRows.bind（this）；
此.state={
}
}
可渲染行（顺序）{
返回(
);
}
render（）{
返回(
订单号
订单名称
地位
时间
目的地
{this.renderTableRows（this.props.Order）}
)
};
}
导出默认板；

这是卡组件

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;

import React，{Component}来自“React”
类卡扩展组件{
建造师（道具）{
超级（道具）；
}
render（）{
//console.log（“this”，this.props）；
返回
{this.props.ID}
{this.props.Name}
{this.props.Status}
{this.props.Time}
{this.props.Destination}
}
}
导出默认卡；

---

有人能提供一些见解吗？

React从模式（数据）创建视图。在您的情况下，您希望视图包括所有收到的订单。为此，您需要将订单保存在状态（在

App

组件中）的数组中，并将其提供给呈现视图的组件（

Board

）。需要

板

需要迭代数组，并生成

卡

组件列表

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>  
    );
  }
}

---

React从模式（数据）创建视图。在您的情况下，您希望视图包括所有收到的订单。为此，您需要将订单保存在状态（在

App

组件中）的数组中，并将其提供给呈现视图的组件（

Board

）。需要

板

需要迭代数组，并生成

卡

组件列表

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>  
    );
  }
}

---

处于状态的

订单

一次是否有一个订单？如果是这样，您需要找到一种方法将订单保存在一个包含所有表行的数组中。然后映射到它们以创建表行不，一次只能创建一个订单。因此，您说“我希望它在每次新数据输入时创建一个新行（卡）……我希望在订单输入时填充我的表。”因此，您希望在同一个表中同时显示所有订单？您是否使用了React的useContext挂钩或Redux之类的帮助进行状态管理？处于状态的

订单

一次是否有一个订单？如果是这样，您需要找到一种方法将订单保存在一个包含所有表行的数组中。然后映射到它们以创建表行不，一次只能创建一个订单。因此，您说“我希望它在每次新数据输入时创建一个新行（卡）……我希望在订单输入时填充我的表。”那么，您想在同一个表中同时显示所有订单吗？您是否使用了React的useContext挂钩或Redux之类的工具来帮助进行状态管理？这正是我所需要的。非常感谢。这正是我需要的。非常感谢你。