javascript - ReactJS 抛出“地图”未定义错误

Question

我对 JavaScript 不是很熟悉，但必须在 ReactJS 中为我​​当前的项目实现一个表。在下面的部分，我得到一个error: map is not defined. 我做了一些错误研究，但在这里或谷歌上找不到令人满意的答案。

   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

您必须在顶部创建的 hits const 上使用 map 函数。像这样：

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

Answer 2

map 是 javascript 中 Array 原型上定义的函数。您在未定义该方法的全局对象上调用 map 。因此，您会得到一个未定义的错误。

hits.map 可能是您正在寻找的。

Answer 3

您的示例来自http://docs.searchkit.co/v2.0.0/components/basics/hits.html

在这种情况下，您需要声明 map ... Put ：

import { map } from 'lodash'

在文件的开头，在 import {....} from 'searchkit' 之后