REACT:我的方法没有根据其名称过滤我的数据

Question

我正在用Redux做一个React项目。我正在尝试做实时搜索。

(在下面)我用onchange处理数据。每次搜索项目更改和设置输入。然后，我试着检查所有的输入变化的使用效果。

const dispatch = useDispatch();
const [input, setInput] = useState("");
const HandleRefresh = () => {
dispatch(FetchCityData());
};
console.log(input);
useEffect(() => {
dispatch(FilterCity(input));
}, [input, dispatch]);

之后，我编写了FetchCityData Reducer。我在myCities数组中的所有城市。我试着用过滤方法找到相等的名字。您可以在下面的代码中看到:

case ActionTypes.GETBY_MYLIST:
return {
...state,
myCities: [
...initialState.myCities,
...state.myCities.filter(
(item) => toString(item.name) === toString(payload.name)
),
],
};

在此之前，我编写了我的动作:

export const FilterCity = (q) => async (dispatch) => {
dispatch({
type: ActionTypes.GETBY_MYLIST,
payload: q,
});
};

q是我的输入，你知道。

然而，它不起作用。我看到控制台输入的变化，但没有过滤。有什么问题吗?

Answer 1

你可以这样处理这个问题。而不是useEffect，我把它放在与输入相连的onChange事件中。将输入值存储在组件级状态中，每当输入值发生变化时(onChange)，您就可以触发负责过滤数据的适当分派。当然每次filter方法完成时它应该更新列表以便UI可以在上面构建。

你总是可以尝试配置redux devtools，这将帮助你跟踪你的商店发生了什么。相信我，它会帮你很多的。

工作流:

1. 用户登录到您的页面
2. Api调用被触发
Api结果存储在redux基于结果数组在UI上构建列表(.map())你将onChange事件附加到输入
3. 每次用户进行更改时，您的结果数组(存储在redux存储中)使用输入值进行过滤。
4. 过滤完成后，将新数组放入redux store中的结果数组
5. Ui注意到他创建列表所基于的列表已经改变，所以他决定重新渲染页面
6. 你的过滤列表现在显示在UI上

这可能与您尝试实现的内容相似

https://levelup.gitconnected.com/how-to-search-filter-through-data-in-react-26f1545fe3a1