React Hooks / Redux 和 onChange 事件答案

【问题标题】：React Hooks / Redux and onChange eventReact Hooks / Redux 和 onChange 事件
【发布时间】：2019-10-11 00:40:04
【问题描述】：

我有以下问题：

我正在使用带有 react hooks 和 redux-persist 的 react redux。

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

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

例如：

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

而 dispatchFn 是：

dispatch(Action.setEmployment(data));

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

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

【问题讨论】：

【解决方案1】：

您可以简单地将 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);
    }
  }
}

【讨论】：