Question

在React中，我将两个数组合并为一个表输出。到目前为止，合并还算不错，但是当我要操作map函数中的特定对象时，它们也会填充空表项，因为另一个数组更大了？

因此，在示例输出下方的文本“ test a ..”下，继续填充价格1列的空列项目。我想要保持它们为空。

class TableForm extends React.Component  {

  get marketData()  {

    const arr1 = [
      {symbol: 'CAT', price_a: 40},
      {symbol: 'DOG', price_a: 50}
    ];
    const arr2 = [
      {symbol: 'CAT', price_b: 25},
      {symbol: 'DOG', price_b: 30},
      {symbol: 'ETC', price_b: 70},
      {symbol: 'BLA', price_b: 20}
    ];

    let arr = [...arr1, ...arr2];

    let combine = arr.reduce((a, { symbol, ...obj }) => {
      a[symbol] = a[symbol] || { symbol };
      Object.assign(a[symbol], obj);
      return a;
    }, {});

    let format = Object.values(combine)

    let markets = format.map((i, k) => {
      return (
        <tr key={k}>
          <td>{i.symbol}</td>
          <td>{i.price_a} test a..</td>
          <td>{i.price_b} test b..</td>
        </tr>
      )
    })
    return markets;
  }

  render() {

    return (
      <div>
        <table>
          <thead>
            <tr>
              <th>symbol</th>
              <th>price 1</th>
              <th>price 2</th>
            </tr>
          </thead>
          <tbody>
            {this.marketData}
          </tbody>
        </table>
      </div>
    );
  }
}

ReactDOM.render(
  <TableForm />,
  document.getElementById('app')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app">
</div>

Answer 1

您每次都像<td>{i.price_a} test a..</td>一样在循环中部署数据。如果在对象中未找到 i.price_a ，则表示该对象未定义，因此其呈现方式类似于<td>{undefined} test a..</td>。

未定义不会反映在jsx中，您只会看到<td>test a..</td>。

要解决此问题，您可以检查每个对象（如果仅找到数据），则td的一部分将被渲染，否则它将变成黑色。

即

<td>{i.price_a ? `${i.price_a} test a..` : ''} </td>

OR

<td>{i.price_a ? i.price_a + 'test a..' : ''} </td>

空的列项目会被填充，而不是保持空白

1 个答案: