Question

我有两个参差不齐的数组，我希望将这两个数组放入表中。我尝试了以下步骤。

我的第一个数组是这样的。此数组数据也是动态的。有时它有5个，但下一次将是6个或7个。这取决于。

var secondArray = [{RoomId:"RID1",Date:"2019/01/02","BookingID":"#111","BookingType":"ChannelManager","Status":0},{RoomId:"RID2",Date:"2019/01/01","BookingID":"#112","BookingType":"WalkIn","Status":1},{RoomId:"RID2",Date:"2019/01/04","BookingID":"#113","BookingType":"ChannelManager","Status":2}]

这是我的第二个数组。它具有一些与firstArray相关的信息

<Table>
           <tbody>

           <tr>
           {this.state.isLoading ? <Loader active /> :
                this.state.firstArray.map(function(item, i){
                  return (
                      <td>
                    {item}
                  </td>                       
                  )
                })
                } 
            </tr>
            {/* data table row */}
            <tr>
           {this.state.isLoading ? <Loader active /> :
                this.state.secoundArray.map((item) => (
                  <td> {this.mappingFunction.call(this, item)} </td>
               ))
                } 
            </tr>
            </tbody> 
            </Table>

如您所见，有时第二个数组未在firstArray中指定所有日期。所以我想要一张如下表。

See This image

我尝试了以下步骤。

with open('data_words.txt','r') as file:
    data=file.read()
    file.close()
    words=data.split(" ")

num_words=len(words)
print(num_words)

如您所见，我试图将secondArray发送到一个名为mappingFunction的函数，并根据日期呈现BookingID，但也是不可能的。有人可以帮我弄这个吗。非常感谢！

Answer 1

我认为您快到了。这种想法是正确的，但您只是没有正确地实施它。怎么样？

return (
  <Table>
    <tbody>
      {this.state.isLoading ? <Loader active /> : firstArray.map(item1 => {
        const valueExistsInBothArrays = secondArray.find(
          item2 => item2.Date === item1
        );
        if (valueExistsInBothArrays) {
          return (
            <tr>
              <td>{valueExistsInBothArrays.Date}</td>
              <td>{valueExistsInBothArrays.RoomId}</td>
              <td>{valueExistsInBothArrays.BookingID}</td>
            </tr>
          );
        }
      })}
    </tbody>
  </Table>
);

Answer 2

我在用reduce和Map渲染表之前重建数据

function App() {
  var firstArray = [
    "2019/01/01",
    "2019/01/02",
    "2019/01/03",
    "2019/01/04",
    "2019/01/05"
  ];
  var secondArray = [
    { RoomId: "RID1", Date: "2019/01/02", BookingID: "#111" },
    { RoomId: "RID2", Date: "2019/01/01", BookingID: "#112" },
    { RoomId: "RID2", Date: "2019/01/04", BookingID: "#113" }
  ];

  const rebuild = secondArray.reduce((acc, { RoomId, Date, BookingID }) => {
      const idx = firstArray.indexOf(Date);
      if (acc.has(RoomId)) acc.set(RoomId, {...acc.get(RoomId), [idx]: BookingID});
      else acc.set(RoomId, {[idx]: BookingID});
      return acc;
    },new Map());

  const renderCells = (cellData) =>
    firstArray.map((e, index) => {
      const tmp = Object.keys(cellData).indexOf(index.toString()) === -1 ? "" : cellData[index];
      return <td>{tmp}</td>;
    });

  return (
    <table>
      <tr>
        <td>Room Name</td>
        {firstArray.map(e => (
          <td>{e}</td>
        ))}
      </tr>
      {[...rebuild].map(([RoomId, cellData]) => {
        return (
          <tr>
            <td>{RoomId}</td>
            {renderCells(cellData)}
          </tr>
        );
      })}
    </table>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></id>

React-如何从两个不均衡的位置向表添加动态数据

2 个答案: