React, создание компонента с таблицей

Question

Имею следующий код. Не могу разобраться почему не работает блок кода, расположенный в теге ? Буду очень благодарен за конструктивную помощь. В пропсы передается массив

const context = [{ "modelMachine": "ПД3,0", "factoryNumberMachine": "0032", "engine": "Kubota V3300" }, { "modelMachine": "ПД3,0", "factoryNumberMachine": "0003", "engine": "Kubota V3300" }]

import React from 'react'

export default function Table(props) {

  return (
      <table>
        <thead>
          <tr key='head'>
            <th>1</th>
            <th>2</th>
            <th>3</th>
          </tr>
        </thead>
        <tbody>
            {props.context.map(item=>{
              <tr key={item.factoryNumberMachine}>
                <td>{item.modelMachine}</td>
                <td>{item.factoryNumberMachine}</td>
                <td>{item.engine}</td>
              </tr>
            })}
        </tbody>
      </table>  
  )
}

Answer 1

Ну во первых давайте разберемся что такое props.context. по вашему мнению это <Table :context={context} /> ?

Если да, то при создании объекта Table ему в изначальном состоянии props не передаются от слова совсем от туда скорее всего ошибка что props.context не инициализирован и у него нет функции map. У undefined нет функции map.

Первым шагом реакт создаёт Table, вторым он повторно вызывает функцию Table уже с наличием аттрибутов.

Я бы все-же изначально проверял что пропса это instanceof Array.

Я бы все-же вынес map из постройщика, а его детей в отдельный компонент, что-бы не убить реактивность компонентов.

БЛОГ НА HUSL

React, создание компонента с таблицей

Ответы (1 шт):