javascript - renderSortByOptions()有什么作用？

我正在研究React，我发现了一个我正在复制并试图理解的伟大项目。到目前为止，除了renderSortByOptions()之外，我对任何事情都没有异议。那里到底发生了什么？我可以看到Object.key用于sortByOptions-对象以获取键（它们是Best Match, Highest Rated and Most Reviewed还是best_match等？）但我不明白为什么会有一个.map。
.map获取一个回调函数，在该函数中声明一个变量（let），并在其中使用sortByOptions作为索引的sortByOption-对象？！我真的很困惑。请为我解释第12-18行（基本上是renderSortByOptions()）。

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
import React from 'react';
import './SearchBar.css';

const sortByOptions = {
  'Best Match': 'best_match',
  'Highest Rated': 'rating',
  'Most Reviewed': 'review_count'
};

class SearchBar extends React.Component {
  renderSortByOptions() {
    return Object.keys(sortByOptions).map(sortByOption => {
      let sortByOptionValue = sortByOptions[sortByOption];
      return <li key={sortByOptionValue}>{sortByOption}</li>;
    });
  }

  render() {
    return (
      <div className="SearchBar">
        <div className="SearchBar-sort-options">
          <ul>
            {this.renderSortByOptions()}
          </ul>
        </div>
        <div className="SearchBar-fields">
          <input placeholder="Search Businesses" />
          <input placeholder="Where?" />
        </div>
        <div className="SearchBar-submit">
          <a>Let's Go</a>
        </div>
      </div>
    );
  }
}

export default SearchBar;

最佳答案

Object.keys(obj)为您提供obj中的一组键。
所以在你的例子中sortByOptions是一个带有键Best Match，Highest Rated和Most Reviewed的对象。

const sortByOptions = {
  'Best Match': 'best_match',
  'Highest Rated': 'rating',
  'Most Reviewed': 'review_count'
};

Object.keys(sortByOptions)将返回数组。
所以这个

Object.keys(sortByOptions).map(...)

实际上是

['Best Match', 'Highest Rated', 'Most Reviewed'].map(...)

['Best Match', 'Highest Rated', 'Most Reviewed']在返回新数组的数组上循环。

Object.keys(sortByOptions).map(sortByOption => {
  // sortByOption will be each key in the object
  // sortByOptionValue will be the value assigned to that key
  let sortByOptionValue = sortByOptions[sortByOption];
    // you return an <li> element with key and value
    return <li key={sortByOptionValue}>{sortByOption}</li>;
});

关于javascript - renderSortByOptions()有什么作用？，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/53892536/