Javascript 如果用户离开页面，则在Redux中重置搜索状态

我正在使用Redux存储搜索值的状态。这是我的搜索组件和减速器

搜索组件

const Search = props => {
  const handleSearch = event => {
    event.preventDefault();
    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 {
    search: state.search,
    filter: state.filter
  };
};

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

如果我搜索某个东西，它会正确地过滤掉已识别的项目。但是，如果我单击另一个页面并返回，则搜索值的状态保持不变。因此，用户必须刷新页面才能清除搜索值。在某些情况下，我发现刷新页面时状态不清楚。我应该在何处以及如何重置“搜索”状态

这里是我的博客组件（注意我在这里也调用搜索组件），我在这里显示博客项目列表

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

const Blogs = ({ blogsToShow, filter }) => {
  return (
    <>
      <Search />
      <div>
        <h3>Blogs</h3>
        <Table striped celled>
          <Table.Header>
            <Table.Row>
              <Table.HeaderCell>Blog Title</Table.HeaderCell>
            </Table.Row>
          </Table.Header>
          <Table.Body>
            {filter === "DESC"
              ? blogsToShow
                  .sort((a, b) => b.likes - a.likes)
                  .map(blog => (
                    <Table.Row key={blog.id}>
                      <Table.Cell>
                        <Link to={`/blogs/${blog.id}`}>{blog.title}</Link>
                      </Table.Cell>
                    </Table.Row>
                  ))
              : blogsToShow
                  .sort((a, b) => a.likes - b.likes)
                  .map(blog => (
                    <Table.Row key={blog.id}>
                      <Table.Cell>
                        <Link to={`/blogs/${blog.id}`}>{blog.title}</Link>
                      </Table.Cell>
                    </Table.Row>
                  ))}
          </Table.Body>
        </Table>
      </div>
    </>
  );
};

const mapStateToProps = state => {
  return {
    blogs: state.blogs,
    filter: state.filter,
    blogsToShow: searchBlogs(state)
  };
};

export default connect(mapStateToProps)(Blogs);

const searchBlogs=（{blogs，search}）=>{
返回搜索
？blogs.filter（a=>a.title.toLowerCase（）.includes（search.toLowerCase（）））
：博客；
};
const Blogs=（{blogsToShow，filter}）=>{
返回(
博客
博客标题
{filter==“DESC”
？博客秀
.sort（（a，b）=>b.likes-a.likes）
.map（blog=>(
{blog.title}
))
：blogsToShow
.sort（（a，b）=>a.likes-b.likes）
.map（blog=>(
{blog.title}
))}
);
};
常量mapStateToProps=状态=>{
返回{
博客：state.blogs，
过滤器：state.filter，
blogsToShow:searchBlogs（州）
};
};
导出默认连接（mapStateToProps）（博客）；

您可以定义一个新操作，如

export const searchChange = search => {
  return {
    type: "RESET_SEARCH"
  };
};

在减速器中，您可以设置为初始状态：

const INITIAL_STATE = {
    ... 
    search: ''
    ... 
}

const searchReducer = (state = null, action) => {
      switch (action.type) {
        case "RESET_SEARCH":
          return INITIAL_STATE;
        default:
          return state;
      }
    };

---

多亏了凯尔的帮助，我做到了以下几点：

创建了一个新的动作创建者和缩减器，如下所示：

export const clearSearch = search => {
  return {
    type: "RESET_SEARCH",
    search
  };
};


const searchReducer = (state = null, action) => {
  switch (action.type) {
    case "SET_SEARCH":
      return action.search;
    case "RESET_SEARCH":
      return null;
    default:
      return state;
  }
};

对于用户可以单击的任何链接，我只包含了对clearSearch操作创建者的调用。这样做的主要问题是，我不仅要在我的博客上为个人的博文做这件事，而且还要为网站上的任何其他页面链接做这件事。这是一个快速修复，但如果添加任何链接，它们将需要包括明确的修复，使之有点混乱

import { clearSearch } from "../reducers/searchReducer";

 const clear = () => {
    clearSearch();
  };

<Link onClick={() => clear()} style={padding} to="/blogs">

从“./reducers/searchReducer”导入{clearSearch}；
常数清除=（）=>{
clearSearch（）；
};
clear（）}style={padding}to=“/blogs”>

您需要一个

清除\u搜索

操作创建者，当它在您的减速机中调度时，返回一个

null

。然后您需要在导航时启动此操作。什么是

链接

？你能在那里表演吗？嗯，好的，这很有道理。链接只是React路由器链接组件，它提供指向新页面的链接…所以不能在那里执行。是的，你可以在

链接
呼叫中启动调度：好吧，好吧，好吧，谢谢你，你能做到这一点太神奇了…我有一个解决方案，我将在下面发布，它很难看，但它正在工作，我想这就是最重要的…谢谢！
import { clearSearch } from "../reducers/searchReducer";

 const clear = () => {
    clearSearch();
  };

<Link onClick={() => clear()} style={padding} to="/blogs">