在 React 中渲染之前对元素进行排序

Question

I'm pretty new to JS and React and I wanted to sort aa list of elements alphabetically by the 'name.' I am going to put these elements into a component to be rendered, but I first want to make sure they are sorted the way I want. I'm familiar with Java and I wanted to know if there is something similar to comparators in JS that I could use to sort by 'name' for each element.

const [colleges, setColleges] = useState([
    {name: 'Princeton \nUniversity', price: 1100.00, img: Princeton, tag: 'princeton', tag2: 'Princeton'},
    {name: 'Stanford \nUniversity', price: 1100.00, img: Stanford, tag: 'stanford', tag2: 'Stanford'}},
    {name: 'Brown \nUniversity', price: 1100.00, img: Brown, tag: 'brown', tag2: 'Brown'},
    {name: 'Columbia \nUniversity', price: 1100.00, img: Columbia, tag: 'columbia', tag2: 'Columbia'},
    {name: 'Wake Forest \nUniversity', price: 1100.00, img: Wake, tag: 'wake', tag2: 'wake forest'},
    {name: 'Michigan, Ross', price: 1100.00, img: Ross, tag: 'ross', tag2: 'michigan'
}])
   const [search, setSearch] = useState('')
   const renderColleges = (colleges.sort()) => (colleges.map(colleges => <College {...colleges} />))

  return (

    <div>

      <div className='title'>
        <Input
        className="input"
        size="large"
        placeholder="Search for a school"
        onChange={(e) => setSearch(e.target.value)}
        value={search}/>
      </div>

      <Row align="middle" className='container'>
        {renderColleges(colleges.filter(c => c.name.includes(search) || c.tag.includes(search) || c.tag2.includes(search)))}
      </Row>

    </div>
  );
}

Answer 1

const renderColleges = (colleges.sort((a,b) => {
   return  a.name.localeCompare(b.name)
}) => (colleges.map(colleges => <College {...colleges} />))

Switch the order of a and b if you want to sort by descending. Always use localeCompare instead of > or < when sorting by string, it's much more accurate. And flexible.

Answer 2

Check this lib https://lodash.com/

import { orderBy } from _ ;


const users = [
  { 'user': 'fred',   'age': 48 },
  { 'user': 'barney', 'age': 34 },
  { 'user': 'fred',   'age': 40 },
  { 'user': 'barney', 'age': 36 }
];
 
// Sort by `user` in ascending order and by `age` in descending order.
_.orderBy(users, ['user', 'age'], ['asc', 'desc']);
// => objects for [['barney', 36], ['barney', 34], ['fred', 48], ['fred', 40]]

You can sort name in ascending order by using _.orderBy

Answer 3

I'm pretty new to JS and React and I wanted to sort aa list of elements alphabetically by the 'name.' I am going to put these elements into a component to be rendered, but I first want to make sure they are sorted the way I want. I'm familiar with Java and I wanted to know if there is something similar to comparators in JS that I could use to sort by 'name' for each element.

const [colleges, setColleges] = useState([
    {name: 'Princeton \nUniversity', price: 1100.00, img: Princeton, tag: 'princeton', tag2: 'Princeton'},
    {name: 'Stanford \nUniversity', price: 1100.00, img: Stanford, tag: 'stanford', tag2: 'Stanford'}},
    {name: 'Brown \nUniversity', price: 1100.00, img: Brown, tag: 'brown', tag2: 'Brown'},
    {name: 'Columbia \nUniversity', price: 1100.00, img: Columbia, tag: 'columbia', tag2: 'Columbia'},
    {name: 'Wake Forest \nUniversity', price: 1100.00, img: Wake, tag: 'wake', tag2: 'wake forest'},
    {name: 'Michigan, Ross', price: 1100.00, img: Ross, tag: 'ross', tag2: 'michigan'
}])
   const [search, setSearch] = useState('')
   const renderColleges = (colleges.sort()) => (colleges.map(colleges => <College {...colleges} />))

  return (

    <div>

      <div className='title'>
        <Input
        className="input"
        size="large"
        placeholder="Search for a school"
        onChange={(e) => setSearch(e.target.value)}
        value={search}/>
      </div>

      <Row align="middle" className='container'>
        {renderColleges(colleges.filter(c => c.name.includes(search) || c.tag.includes(search) || c.tag2.includes(search)))}
      </Row>

    </div>
  );
}