Question

我一直在解决这个反应表问题。我需要创建一个包含3个<td>单元格的表，并且需要在<td>单元格中插入一些来自数组的数据。数组长度未知，可以在0到3个元素之间。如果有数据，则需要将其放入正确的<td>单元格中；如果没有任何数据，则<td>需要打印为空。我的任何尝试都没有返回正确数量的<td>单元格，其中包含/不包含数据。

dataArray示例-未知的数组数

const dataArray = []

或

const dataArray = [1, 2, 3]

let i;
const myTD = [];

    for (i = 0; i <= 2; i++) {
      if (dataArray.length() > 0) {
        dataArray.map((data, index) => {
          if (index === i + 1) {
            myTD.push(
              <td
                key={data._id}
              >
                {data}
              </td>
            );
          } else {
            dataArray.push(
              <td
                key={cryptoRandomString({ length: 10 })}
              >
                No data
              </td>
            );
          }
        });
      } else {
        dataArray.push(
          <td
            key={cryptoRandomString({ length: 10 })}
          >
            No array
          </td>
        );
      }
    }

Answer 1

这可以为您提供帮助，

let i;
const myTD = [];

if (dataArray.length > 0) {
  dataArray.map((data, index) => {
      myTD.push(<td key={data._id}>{data}</td>);
  });
}

for (i = 0; i <= 2; i++) {
  if(!myTD[i]){
    myTD[i] = <td key={cryptoRandomString({ length: 10 })}>No data</td>
  }
}

Demo经过简单数据测试。

Answer 2

如果数组的长度始终为3，则可以手动创建行，然后可以检查数组中是否存在该信息，并默认显示该信息或其他数据。

const tds = Array.from({ length: 3 }, (_, key) => (
    <td
      key={dataArray[key].id || cryptoRandomString({ length: 10 })}
    >
      // Check if field data exist or display a message
      {dataArray[key].data || 'No Data'}
    </td>
  ));

这将显示：

[null, { data: 1, id: 1 }] as ['No Data', 1, 'No Data']

返回特定数量的<td>与数组数据

2 个答案: