javascript - 用数组数据返回特定数量的 <td>

Question

我被这个 react 表问题困住了。我需要用 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用简单的数据进行测试。