时间戳

首页 > 解决方案 > React Hooks / Redux 和 onChange 事件

reactjs - React Hooks / Redux 和 onChange 事件

问题描述

我有以下问题：

我正在使用带有反应钩子和 redux-persist 的 react redux。

如果我打开我的反应应用程序，将加载可用的过滤器（使用对象）。

当我使用一些具有 onChange 事件的输入字段并且这些 onChange 事件触发过滤时，过滤不起作用，因为此时过滤器值不存在。

例如：

onChange = {
  e => {
    item.dispatchFn(e);
  }
}

dispatchFn 是：

dispatch(Action.setEmployment(data));

所以问题是：在渲染组件和加载过滤器之前触发 onChange 事件。

我该如何解决这个问题？获得解决方案的常用方法是什么？

标签： reactjsreduxonchange

解决方案

您可以简单地将 onChange 函数的工作与 if 语句（使用类似 this.state.loaded 的内容）包装起来，然后您可以使用 componentDidMount 挂钩来更改状态并允许 onChange 事件完成它的正常工作。例如：

componentDidMount() {

this.setState({
loaded: true
});
}

onChange = e => {
if(this.state.loaded){
/* do your onChange job
}
}

对于功能组件：

记得从 React 导入 setState：

import { setState } from 'react'

然后设置状态并在渲染后使用 useEffect 处理代码（不要忘记设置状态）

const [state, setState] = useState({loaded: false});
useEffect(() => {
if(!state.loaded) setState({ loaded: true 
  });
});

更新您的 onChange 函数：

onChange = {
  e => {
if(state.loaded){
    item.dispatchFn(e);
    }
  }
}

推荐阅读