Javascript 在React/Redux中同时搜索和排序

我正在为一个测试博客应用程序开发一个简单的搜索和排序机制

每一个单独的函数都能正常工作，但我在将它们拼接在一起时遇到了麻烦

我只是希望用户能够有能力搜索一个博客标题，同时也有能力排序的博客喜欢。我可能会在将来的某个时候添加过滤功能，所以我想确保我的设置是正确的

我尝试了多种方法在我的博客组件（我在这里列出了博客）中将这两个部分结合在一起，但没有任何运气

这是我的搜索函数，它接受一个搜索词（变量“search”）和当前的“blogs”状态，还有我的过滤函数，它只是根据blog喜好进行排序

const searchBlogs = ({ blogs, search }) => {
  return search
    ? blogs.filter(a => a.title.toLowerCase().includes(search.toLowerCase()))
    : blogs;
};


const filterBlogs = ({ blogs, filter }) => {
  if (filter === "DESC") {
    return blogs.sort((a, b) => b.likes - a.likes);
  } else {
    return blogs.sort((a, b) => a.likes - b.likes);
  }
};

我在mapstatetoprops中存储搜索后博客的更新状态，如下所示：

blogsToShow: searchBlogs(state)

然后映射到我的博客组件中的

blogsToShow

const Blogs = ({ blogsToShow }) => {
  return (
    <ul>
      {blogsToShow.map(blog => (
        <Blog key={blog.id} blog={blog} user={blog.user} />
      ))}
    </ul>
  );
};

我知道必须有一种更简单、更有效的方法来做到这一点

注意，我不想在此发布太多代码，但这是我的搜索组件，我正在将其发送到redux商店：

const Search = props => {
  const handleSearch = event => {
    props.searchChange(event.target.value.toLowerCase());
  };

  const handleFilter = event => {
    props.filterChange(event.target.value);
  };

  const style = {
    marginBottom: 10
  };

  return (
    <div style={style}>
      search
      <input onChange={handleSearch} />
      <select onChange={handleFilter}>
        <option value="DESC">Sort Likes Descending</option>
        <option value="ASC">Sort Likes Ascending</option>
      </select>
    </div>
  );
};

const mapStateToProps = state => {
  return {
    filter: state.filter,
    search: state.search
  };
};

export default connect(mapStateToProps, { searchChange, filterChange })(Search);

const Search=props=>{
const handleSearch=事件=>{
searchChange（event.target.value.toLowerCase（））；
};
const handleFilter=事件=>{
props.filterChange（event.target.value）；
};
常量样式={
marginBottom:10
};
返回(
搜索
排序喜欢下降
排序喜欢上升
);
};
常量mapStateToProps=状态=>{
返回{
过滤器：state.filter，
搜索：state.search
};
};
导出默认连接（mapStateToProps，{searchChange，filterChange}）（搜索）；

嗯，我想出了一个可行的办法，但不是很优雅

如果有人有更好的主意，我洗耳恭听。谢谢<代码>在此处输入代码

const Blogs = ({ blogsToShow, filter }) => {
  return (
    <ul>
      {filter === "DESC"
        ? blogsToShow
            .sort((a, b) => b.likes - a.likes)
            .map(blog => <Blog key={blog.id} blog={blog} user={blog.user} />)
        : blogsToShow
            .sort((a, b) => a.likes - b.likes)
            .map(blog => <Blog key={blog.id} blog={blog} user={blog.user} />)}
    </ul>
  );
};

constblogs=（{blogsToShow，filter}）=>{
返回(

{filter==“DESC”
？博客秀
.sort（（a，b）=>b.likes-a.likes）
.map（blog=>）
：blogsToShow
.sort（（a，b）=>a.likes-b.likes）
.map（blog=>）}

);
};

const Blogs = ({ blogsToShow, filter }) => {
  return (
    <ul>
      {filter === "DESC"
        ? blogsToShow
            .sort((a, b) => b.likes - a.likes)
            .map(blog => <Blog key={blog.id} blog={blog} user={blog.user} />)
        : blogsToShow
            .sort((a, b) => a.likes - b.likes)
            .map(blog => <Blog key={blog.id} blog={blog} user={blog.user} />)}
    </ul>
  );
};