Как отобразить массив объектов в таблице в ответ

Question

Я недавно учился реагировать. Я установил свое состояние для массива объектов. Я хочу отобразить этот массив в таблице на странице (каждый объект в одной строке). Я изучал карту, но у меня возникли проблемы с ее пониманием. Я был в состоянии использовать карту просто отлично в другом месте в моем коде для отображения через массив , но у меня возникают проблемы с отображением через массив объектов . Этот код находится в div внутри моего рендера:

<table>
  {this.state.orderDetails.map((item =>
  <tr key={item}>{item}</tr>
  ))}
</table>

Я получаю эту ошибку: «Необработанный отказ (ошибка): объекты недопустимы как дочерние элементы React (найдено: объект с ключами {OrderID, CustomerID, AddressID, Дата, ItemID, BookID, UnitPrice, Количество}). Если вы намеревались визуализировать коллекцию дочерних элементов, используйте вместо этого массив. '

Детали заказа определенно установлены правильно; когда я открываю свои инструменты реагирования и проверяю состояние в этом компоненте, он отображается как массив с двумя элементами, каждый из которых является объектом с несколькими элементами внутри. Как я могу успешно отобразить этот массив объектов и отобразить его в виде таблицы (с каждым объектом в отдельной строке)? Спасибо заранее за любые идеи !!!

РЕДАКТИРОВАТЬ После получения некоторых советов из ответов и комментариев я изменил свою карту на следующее:

<table>
  {this.state.orderDetails.map((item =>
  <tr><td key={item.OrderID}>{item.CustomerID}</td></tr>
  ))}
</table>

Ошибка исчезла. Однако, когда я нажимаю кнопку, я получаю одну крошечную пустую ячейку таблицы. Я ожидаю нескольких ячеек, так как в моем массиве есть два объекта, и, конечно, я ожидаю, что он не будет пустым. Кроме того, я хочу показать больше, чем просто идентификатор клиента. У меня есть несколько элементов в каждом объекте, которые я хочу отобразить в таблице (например, количество, цена, заголовок и т. Д. c ...). Любые дальнейшие предложения?

Answer 1

Мы не знаем, как выглядит ваш массив объектов, поэтому мы должны угадать:

Итак, я предполагаю, что этот ввод:

const initState = [
    { id: 1, name: "bread", quantitiy: 50 },
    { id: 2, name: "milk", quantitiy: 20 },
    { id: 3, name: "water", quantitiy: 10 }
  ];

И я получаю этот вывод:

Это полностью гибко, поэтому, если у нас есть ввод:

const initState = [
    { id: 1, name: "bread", quantitiy: 50, location: "cupboard" },
    { id: 2, name: "milk", quantitiy: 20, location: "fridge" },
    { id: 3, name: "water", quantitiy: 10, location: "fridge" }
  ];

Тогда мы получим этот вывод:

Наиболее важным является сопоставление значений объекта внутри карты, которая сопоставляется с массивом состояний:

{state.map((item) => (
        <tr key={item.id}>
          {Object.values(item).map((val) => (
            <td>{val}</td>
          ))}
        </tr>
      ))}

полная демонстрация ниже и на codePen : https://codepen.io/Alexander9111/pen/zYvEbML

Я использовал функциональный компонент, но он был бы очень похож на компонент на основе классов.

ПРИМЕЧАНИЕ: вы также можете создать компонент строки и затем вызовите этот компонент внутри карты через массив состояний. Внутри этого компонента строки вы должны отобразить ключи Object, как я, и вывести элементы данных таблицы. Это баланс между смертью по компонентам (т.е. разбивкой всего на все более мелкие компоненты, вложенные друг в друга) и меньшим количеством слишком сложных компонентов.

function MyTable() {
  const initState = [
    { id: 1, name: "bread", quantitiy: 50, location: "cupboard" },
    { id: 2, name: "milk", quantitiy: 20, location: "fridge" },
    { id: 3, name: "water", quantitiy: 10, location: "fridge" }
  ];
  const [state, setState] = React.useState(initState);

  return (
    <table>
      <tr key={"header"}>
        {Object.keys(state[0]).map((key) => (
          <th>{key}</th>
        ))}
      </tr>
      {state.map((item) => (
        <tr key={item.id}>
          {Object.values(item).map((val) => (
            <td>{val}</td>
          ))}
        </tr>
      ))}
    </table>
  );
}

ReactDOM.render(<MyTable />, document.getElementById("target"));

th,
td {
  border: 1px solid black;
  margin: 0px 0px;
  padding: 5px 5px;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.13.1/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.13.1/umd/react-dom.production.min.js"></script>
<div id="target"></div>

Answer 2

Объекты недопустимы как дочерние элементы React

Это означает, что вы передали Объект вместо того, что React может десериализовать; например, строка или число.

Прежде всего, вы должны передать key = {} нечто уникальное (не индекс массива). itemID было бы неплохо.

Answer 3

Вы можете сделать это,

 <table>
  {this.state.orderDetails.map((item =>
  <tr><td key={item.OrderID}>{item.UnitPrice}</td></tr>
  ))}
</table>

Answer 4

элемент - это объект из массива. Таким образом, этот объект будет иметь ключ (и) и значение (я). Вам нужно извлечь их и показать

Например, предположим, что массив похож на

orderDetails=[{
  OrderID:1,
  CustomerID:'someName'
}]

Тогда на карте вам нужно сделать

<table>
  {this.state.orderDetails.map((item =>
  <tr key={item.OrderID}>{item.CustomerID}</tr>
  ))}
</table>