функция для рендеринга нескольких массивов в таблицу создает пустые тд теги

Question

Я объединяю массивы для вывода их данных внутри таблицы.Объединение до сих пор проходит успешно ... но после этого, я думаю, что-то пошло не так.Решение должно быть очень простым, но на данный момент я не могу понять ... кажется, что после каждого цикла из функции карты создаются пустые теги td, которые сдвигают строки вниз.

testdata:

export const arr1 = [{
  "tre": 1,
  "tro": "Nikkie"
}, {
  "tre": 2,
  "tro": "Donia"
}, {
  "tre": 3,
  "tro": "Lavena"
}];

export const arr2 = [{
  "bla": 1,
  "blo": "Carola"
}, {
  "bla": 2,
  "blo": "Rosa"
}, {
  "bla": 3,
  "blo": "Geneva"
}];

export const arr3 = [{
  "bra": 1,
  "bru": "Currie"
}, {
  "bra": 2,
  "bru": "Aura"
}, {
  "bra": 3,
  "bru": "Irwinn"
}];

Функция:

tableData() {
    const combined = [...arr1, ...arr2, ...arr3];

    var data = combined.map((i, k) => {
      return (
        <tr key={k}>
          <td>{i.tre}</td>
          <td>{i.tro}</td>
          <td>{i.bla}</td>
          <td>{i.blo}</td>
          <td>{i.bra}</td>
          <td>{i.bru}</td>
        </tr>
      )
    })
    return data
  }

  render() {
    return (
      <div className="table-responsive">
        <table className="table table-sm table-hover">
          <thead>
            <tr>
              <th>rank</th>
              <th>name</th>
              <th>rank</th>
              <th>name</th>
              <th>rank</th>
              <th>name</th>
            </tr>
          </thead>
          <tbody>
            {this.tableData}
          </tbody>
        </table>
      </div>
      )
     }

Будет выглядеть так:

Обновление с помощью:

      <td>{i.tre || 'test TRE'}</td>
      <td>{i.tro || 'test TRO'}</td>
      <td>{i.bla || 'test BLA'}</td>
      <td>{i.blo || 'test BLO'}</td>
      <td>{i.bra || 'test BRA'}</td>
      <td>{i.bru || 'test BRU'}</td>

Answer 1

Если вы просто объедините свои массивы, каждый элемент в combined будет иметь только два свойства, а остальные будут неопределенными. Вместо этого вы захотите объединить объекты из каждого из трех массивов для каждого элемента в combined. Примерно так должно работать:

const combined = [];
const maxLen = Math.max(arr1.length, arr2.length, arr3.length);
for (let i=0; i<maxLen; i++) {
  combined.push({...arr1[i], ...arr2[i], ...arr3[i]})
}  

Или, если вы используете Lodash:

const combined = _.zipWith(arr1, arr2, arr3, (i1, i2, i3) => ({...i1, ...i2, ...i3}));

Answer 2

Пустые теги td могли быть вызваны тем, что объект из combined не имеет всех свойств, к которым вы пытаетесь обратиться, и map возвращает для них undefined.Попробуйте следующее, и, возможно, вы сможете понять это.Если вы увидите Test ... в своей таблице, вы узнаете, какое свойство отсутствует.

Надеюсь, это поможет

tableData() {
    const combined = [...arr1, ...arr2, ...arr3];

    var data = combined.map((i, k) => {
      return (
        <tr key={k}>
          <td>{i.tre || "Test TRE" }</td>
          <td>{i.tro || "Test TRO" }</td>
          <td>{i.bla || "Test BLA" }</td>
          <td>{i.blo || "Test BLO" }</td>
          <td>{i.bra || "Test BRA" }</td>
          <td>{i.bru || "Test BRU" }</td>
        </tr>
      )
    })
    return data
  }

  render() {
    return (
      <div className="table-responsive">
        <table className="table table-sm table-hover">
          <thead>
            <tr>
              <th>rank</th>
              <th>name</th>
              <th>rank</th>
              <th>name</th>
              <th>rank</th>
              <th>name</th>
            </tr>
          </thead>
          <tbody>
            {this.tableData}
          </tbody>
        </table>
      </div>
      )
     }

PS: Было бы хорошо, если бы вы предоставили больше данных для combined.