ReactJS выдает "карту" не определена ошибка

Question

Я не очень знаком с JavaScript, но мне нужно реализовать таблицу в ReactJS для моего текущего проекта.На части ниже я получаю error: map is not defined.Я провел исследование ошибок, но не смог найти удовлетворительный ответ здесь или в Google.

   render() {
        const { hits } = this.props
        return (
            <div style={{width: '100%', boxSizing: 'border-box', padding: 8}}>
                <table className="sk-table sk-table-striped" style={{width: '100%', boxSizing: 'border-box'}}>
                    <thead>
                        <tr>
                            <th>Title</th>
                            <th>Author</th>
                            <th>Keywords</th>
                        </tr>
                    </thead>
                    <tbody>
            {map(hits, hit => (
              <tr key={hit._id}>
                <td>{hit._source.title}</td>
                <td>{hit._source.year}</td>
                <td>{hit._source.imdbRating}</td>
              </tr>
            ))}
          </tbody>
                </table>
            </div>
        )
    }

Может ли кто-нибудь указать мне правильное направление?

Answer 1

map - это функция, определенная в прототипе Array в javascript. Вы вызываете карту здесь для глобального объекта, для которого этот метод не определен. Таким образом, вы получите неопределенную ошибку.

hit.map, вероятно, то, что вы ищете.

Answer 2

Ваш пример из http://docs.searchkit.co/v2.0.0/components/basics/hits.html

В этом случае вам нужно объявить карту ... Положено:

import { map } from 'lodash'

в начале вашего файла, после импорта {....} из 'searchkit'

Answer 3

Вы должны использовать функцию карты на хиты const, которые вы создаете вверху. Как это:

{hits.map(hit => (
  <tr key={hit._id}>
    <td>{hit._source.title}</td>
    <td>{hit._source.year}</td>
    <td>{hit._source.imdbRating}</td>
  </tr>
))}