路由时如何更新状态答案

【问题标题】：How to update state when routing路由时如何更新状态
【发布时间】：2021-04-26 08:02:37
【问题描述】：

我有以下按钮。

const [search, setSearch] = useState(false);
<Button component={RouterLink}
        to="/cr-journey"
        onClick={() => setSearch(true)}
        fullWidth>Search
    </Button>

我想在单击按钮时更新状态。可能是因为按钮会路由到不同的组件，所以状态不会更新。

const xxx = useCallback(() => { dispatch(journeyAction.journeyFilterData(search));}, [dispatch,search]);
useEffect(() => { xxx() });

如何确保 useEffect 在单击按钮时更新状态？

谢谢

【问题讨论】：

标签： reactjs redux react-router-dom

【解决方案1】：

当路由发生变化时，组件基本卸载。并且您无法控制已卸载组件的本地状态。

但是你可以在组件卸载时更新 redux 状态。

useEffect(() => {

   return () => // your dispatch function  

}, []);

但如果组件没有卸载，只需将更新函数粘贴到 useEffect 中，不带 return 关键字。

 useEffect(() => {

      dispatch(someFunc()); // when search updates this will be call
    
 }, [search]);

【讨论】：

我打算推荐一个 onClick 函数来更新状态，然后通过 history.push() 触发重定向，但我更喜欢你的回答。 useEffect 的清理功能真是天才！
您好兰德尔，谢谢您的回答。不幸的是，它仍然不适合我。您能否详细说明您的答案。据我了解，我应该使用第一个选项，因为组件已卸载？
@angus 如果您的组件卸载，您需要使用第一个选项。在组件卸载时更改 redux 状态。如果在页面重定向时仍然安装使用 useEffect 与数组依赖关系。
@angus 如果您仍然无法理解，或者它无法正常工作，请使用您的简约代码逻辑向我发送沙箱。
@angus 因为组件卸载本地状态没有改变，这就是为什么你的 redux 状态保持不变。这里是状态改变的工作示例codesandbox.io/s/immutable-wave-6kdv4 这段代码非常丑陋。我希望你这样做学习目的。这不是一个刺激。代码。祝你好运。