如何使用钩子重写带有 setState 和回调的 react-method？答案

【问题标题】：How can i rewrite react-method with setState and callback using hooks?如何使用钩子重写带有 setState 和回调的 react-method？
【发布时间】：2020-08-30 17:23:48
【问题描述】：

我有一个反应组件，其中包含带有回调的 setState 方法。我需要将它重写为钩子。请告诉我如何重写这个方法？

 beforeSubmitModal = action => (args) => {
    this.setState({
      visible: false,
      selectedMenuItem: null,
      companyCodeModal: {}
    }, () => action(args));
  };

const onDeleteCode = (id) => {
    dispatch(actions.deleteCode.request({ codeId: id }));
  };

const modalProps = {
    onSaveOrUpdate: beforeSubmitModal(dispatch(actions.insertOrEditCode.request())),
    onDelete: beforeSubmitModal(onDeleteCode),
  };

【问题讨论】：

您对动作函数的期望是什么。它应该如何工作。它是否使用状态值。您的visible、selectedMenuItem 和companyCodeModal 等州也从其他任何地方更改了吗？
组件其他地方的状态变化。

标签： reactjs callback react-hooks setstate use-effect

【解决方案1】：

您需要使用 useEffect 来执行此操作

const [visible,setVisible] = useState(ture);

const doSomething = () => {
  setVisible(false);
}

useEffect(() => {
   //this will render every time the visible state changes
}, [visible]);

【讨论】：

【解决方案2】：

在钩子中定义状态

const [visible,setVisible]=useState(false) // initial value false
const [selectedMenuItem,setCompanyCodeModal]=useState(null) // initial value null
const [companyCodeModal,setCompanyCodeModal]=useState('')

当他们改变时你需要做一些动作

useEffect(()=> doSomething() ,[visible,selectedMenuItem,companyCodeModal])

【讨论】：