renderSortByOptions（）有什么作用？

Question

I'm studying React and i found a great project i'm replicating and trying to understand. So far i had no issues with anything except with the renderSortByOptions() . What exactly is happening there? I can see that the Object.key is used on the sortByOptions -object to get the keys (which are Best Match, Highest Rated and Most Reviewed or is it best_match etc.?) but i'm confused why there is a .map .

.map gets a callback-function where a variable (let) gets declared and in it is the sortByOptions -object with sortByOption as an index?! I am really confused about this. kindly explain lines 12 - 18 (basically the renderSortByOptions() ) for me.

 <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) gives you an array of keys in obj .

So in your case sortByOptions is an object with keys Best Match , Highest Rated and Most Reviewed .

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

Object.keys(sortByOptions) will return an array ['Best Match', 'Highest Rated', 'Most Reviewed'] .

So this

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

is actually

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

.map loops over an array returning a new array.

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

Answer 2

The map function is used to iterate an array passing the array items one by one to the callback function, and return values returned in the callback function. As you can see here the rule with React is that each child produced in that iteration needs to have a unique key .

Now the array that the map function is iterating (looping through) is the result (or return value) of Object.keys which returns an array of the keys in the nominated object. In your case the return value of Object.keys(sortByOptions) will be

[
  'Best Match',
  'Highest Rated',
  'Most Reviewed'
]

So iterating (looping) that array is what your function renderSortByOptions is doing.

The variable created inside the callback function is basially the value of the key in the sortByOptions object. So for the first item in the iteration the value sortByOptions[sortByOption] is best_match , the second is rating and the third would be review_count ;

Basically the result of that functiontion will be

<li key="best_match">Best Match</li>
<li key="rating">Highest Rated</li>
<li key="review_count">Most Reviewed</li>

of course they need to be children of a <ul> which is taken care of inside the render function

<ul>
    {this.renderSortByOptions()}
</ul>

Hope that clarifies things a little :)