javascript - renderSortByOptions() 有什么作用？

Question

我正在研究 React，我发现了一个很棒的项目，我正在复制并试图理解它。到目前为止，除了 renderSortByOptions() 之外，我没有遇到任何问题。那里到底发生了什么？我可以看到 Object.key 用于 sortByOptions-object 以获取键(它们是 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;

Answer 1

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) 将返回数组 ['Best Match', 'Highest Rated', 'Most Reviewed']。

所以这个

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

实际上是

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

.map 遍历数组返回一个新数组。

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>;
});