Question

因此，我是React Hooks概念的新手，我不确定执行以下任务的正确方法。所以基本上我想做的是

我有状态

 const [payload, setPayloadData] = useState({})

在onChange事件上发生更改，例如

 const onChangeHandler = async (data, errorMessage=null) => {
    // Error Message is usually passed from the child components (look ad date componenet example )
    if (!errorMessage) {
      const currentData = {...payload}
      currentData[key] = data
      setPayloadData(currentData)

    } else {
      setErrorData({status: true, message: errorMessage})
    }
  }

现在，我想添加一个验证器，该验证器应在状态更改/更新后触发。

const inputValidatorSelector = () => {
    if (validator  === undefined && !currentData[key] && required) return () => true
    if (validator) return validator
    return () => false
  }

  const inputValidator = inputValidatorSelector()

我正在查看React Hooks的官方文档，但是它没有谈论堆栈溢出中大多数答案都使用的第二个参数（useEffects的参数）。

useEffect(() => {
   console.log('Do something after counter has changed', counter);
}, [counter]);

即上面代码段中的[counter]来自Stackoverflow的以下答案： https://stackoverflow.com/a/56247483/8701527

所以，有人可以帮我弄清楚状态更新后如何通过验证函数吗？

Answer 1

不幸的是，setState钩子中的useState方法没有第二个参数。如果您希望在状态更新后运行函数，请使用useEffect钩子：

import React, { useState, useEffect } from 'react';

// ... rest of your component

useEffect(() => {
    // Add your logic here
   // This will run whenever the payload state changes.   
},[payload])

进一步了解useEffect钩子here。

反应挂钩回调

1 个答案: