Строка таблицы сопоставленной таблицы React Typescript не отображается - PullRequest
Новая
       151

Строка таблицы сопоставленной таблицы React Typescript не отображается

2 голосов
/ 19 июня 2020

У меня есть список объектов, называемых элементами. Я хочу, чтобы каждый объект в списке был строкой в ​​таблице. Однако строки не отображаются. Я использую машинописный текст с react- bootstrap. Мне интересно, почему это произошло и как это исправить. Спасибо!

Template.tsx 

export default function Templates() {
    const items = [
        {
          "name": "Item 1",
          "alt": "First",
          "description": "This is the first item"
        },
        {
          "name": "Item 2",
          "alt": "Second",
          "description": "This is the second item"
        },
        {
          "name": "Item 3",
          "alt": "Third",
          "description": "-"
        }
      ]
    return (
        <>
            <MyTable items={items}>MyTable</MyTable>
        </>
    )
}

MyTable.tsx 

import React from 'react'
import { Table, Button } from 'react-bootstrap'

type TableProps = {
    items: {
        name: string,
        alt: string,
        description: string
    }[]
}
const MyTable: React.FunctionComponent<TableProps> = ({
    items
  }) => {
    return (
        <>
            <Table striped bordered hover variant="dark">
                <thead>
                    <tr>
                        <th>Name</th>
                        <th>Alt</th>
                        <th>Description</th>
                    </tr>
                </thead>
                <tbody>
                    {items.map(item => {
                        <tr>
                            <td>{item.name}</td>
                            <td>{item.alt}</td>
                            <td>{item.description}</td>
                        </tr>
                    })}
                </tbody>
            </Table>
        </>
        )
  };

export default MyTable;

Сейчас выполняется рендеринг только thead.

Ответы [ 4 ]

1 голос
/ 19 июня 2020

вы сопоставляете элементы, и обратный вызов карты возвращает значение undefined (нет возврата), убедитесь, что вы вернули повторяющийся элемент: 

     {items.map(item => {
          return (
            <tr key={item.name}>
              <td>{item.name}</td>
              <td>{item.alt}</td>
              <td>{item.description}</td>
            </tr>
          )
        })}
0 голосов
/ 19 июня 2020

Поскольку другие уже ответили, мы можем упростить его, заменив фигурные скобки и оператор return скобками вокруг JSX, который вы хотите вернуть

Пример: 

     {items.map(item => (
            <tr key={item.name}>
              <td>{item.name}</td>
              <td>{item.alt}</td>
              <td>{item.description}</td>
            </tr>
          )
        )}

изменить: что Так c сказал ^

0 голосов
/ 19 июня 2020

Проблема с тем, как вы используете стрелочную функцию внутри items.map.

Обратите внимание, что есть разница между следующими:

  • item => { <tr></tr> }: это - это функция с оператором <tr/><tr>, определенная в блоке без оператора возврата.
  • item => (<tr></tr>): это функция, которая возвращает одно выражение (<tr></tr>)
  • item => { return (<tr></tr>)}: это - это функция с оператором в блоке с оператором возврата.
0 голосов
/ 19 июня 2020

Проблема в том, что вы здесь ничего не возвращаете: 

{items.map(item => {
    <tr>
       <td>{item.name}</td>
       <td>{item.alt}</td>
       <td>{item.description}</td>
     </tr>
})}

Для того, чтобы он что-то отрендерил - нужно вернуть.

Попробуйте это: 

{items.map(item => <tr>
  <td>{item.name}</td>
  <td>{item.alt}</td>
  <td>{item.description}</td>
</tr>)}
...