使用Redux时，多个过滤器会对分页做出React

siv3szwd 于 2022-11-12 发布在 React

关注(0)|答案(1)|浏览(151)

期望值：

使用react和redux过滤和查询一些数据。

我有3个场景：
1.使用搜索框中的值调用api（搜索框存在于另一条路线中，并获取用于搜索的值i从url中提取值）
1.使用筛选器按钮中的值调用api（当onChange发生时，i使用useState更改值）
1.使用默认值调用api
Ex方法：

*默认值（）：调用默认API示例：https：api/汽车&限制= 10 &偏移量=0
*按关键字搜索（）：调用默认API示例：关键字=vwbeetle&限制= 10 &偏移量=0
*按标签搜索（）：调用默认API示例：https：api/汽车？标签=红色、蓝色&限制= 10 &偏移=0

当页面加载时，默认搜索（如果关键字不存在）为默认搜索如果用户在搜索框中输入值，则Redux存储中的值将被重置，并且变量偏移量也将被重置，因为搜索类型已更改。如果用户单击标签过滤器，来自Redux存储的值也被重置，并且变量偏移量也被重置，因为搜索的类型被改变。

问题：

我如何执行所有类型的搜索与分页与当前类型的搜索？

代码

useEffect(() => {
    if (keyword) {
      searchKeyword(keyword);
    } else {
      searchTags();
      searchDefault();
    }
  }, [keyword, searchDefault, searchKeyword, searchTags

]）;

redux

来源：https://stackoverflow.com/questions/73418570/multiple-filters-in-react-with-pagination-using-redux

1条答案

按热度按时间

mzillmmw1#

如果我没有理解错的话，你不需要default（），因为它只是Redux存储中的值，你可以在存储中设置关键字的默认值，这样它就可以调用默认的API。

useEffect( () => {

//keyword's default value is defined in the redux store
//so we don't need to do an if statement
searchKeyword(keyword);

此外，不要尝试使用useEffect（）来进行命令性的状态更改，最好是将其用于不断变化的数据，如订阅。如果您希望以更好的方式执行搜索，您可以使用一个按钮，它只向Redux发送一个新的状态，您的页面将自动重新呈现，而不必在useEffect（）中放入逻辑。
你还应该有一个临时关键字状态，它不与Redux连接，以防你没有这样的状态。

const jsxButton = (<button onClick={tagAndKeywordDispatchHandler}</button>)

const tagAndKeywordDispatchHandler = () =>
{
    dispatch(setKeyword(tempKeyword));
    dispatch(setTag1(tag1));
    dispatch(setTag2(tag2));
    dispatch(setTag3(tag3));
}

赞(0）回复(0）举报 2022-11-12

我来回答

使用Redux时，多个过滤器会对分页做出React

1条答案

相关问题

热门标签

最新问答