我试图找出如何使用嵌套钩子来更新父组件中的状态。我最近了解到钩子基本上遵循相同的setState()异步更新模式,但我很难找到我的战争。
我有3个自定义挂钩:
useValidateContent
:用于验证特定表单的自定义钩子。
useValidateRuleOne
:用于验证特定规则的自定义挂钩。
useValidateRuleTwo
:用于验证另一个特定规则的自定义挂钩。
我想在useValidateRuleOne
中使用useValidateRuleTwo
和useValidateContent
并在点击时更新ParentComp。现在需要2次点击才能显示消息。
使用嵌套自定义挂钩的正确方法是什么,以便首次运行时首次更新状态。
const { useState } = React;
const useValidateRuleOne = initState => {
const[valid, setValid] = useState(initState)
const[errorMsg, setErrorMsg] = useState(null)
const validate = () => {
// For test purposes just set to false
setValid(false)
setErrorMsg('There was an error validating rule one')
}
return [valid, validate, errorMsg]
}
const useValidateRuleTwo = initState => {
const[valid, setValid] = useState(initState)
const[errorMsg, setErrorMsg] = useState(null)
const validate = () => {
// For test purposes just set to false
setValid(false)
setErrorMsg('There was an error validating rule two')
}
return [valid, validate, errorMsg]
}
const useValidateContent = initState => {
const [valid, setValid] = useState(initState);
const [validOne, validateOne, errorOne ] = useValidateRuleOne(true)
const [validTwo, validateTwo, errorTwo ] = useValidateRuleTwo(true)
const [errorMsg, setErrorMsg] = useState("");
const validate = () => {
validateOne()
validateTwo()
let errorMsg = '';
if (!validOne) errorMsg += errorOne;
if (!validTwo) errorMsg += errorTwo;
setErrorMsg(errorMsg)
if (errorMsg.length > 1) setValid(false)
}
return [valid, validate, errorMsg];
};
function ParentComp() {
const [contentIsValid, validate, contentError] = useValidateContent(true);
const initValidate = () => {
// values before running validate
validate();
};
return (
<div>
<button onClick={initValidate}>initValidate</button>
contentIsValid: {contentIsValid.toString()}, contentError: {contentError}
</div>
);
}
ReactDOM.render(<ParentComp />, document.getElementById('root'))
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<script src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"></div>
根据Hooks API,您不应该有条件地或在嵌套函数内调用钩子。 https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level
您的问题的一个解决方案是添加useEffect,它将在您指定的依赖项发生更改时触发。这是一个有效的例子:https://codesandbox.io/s/5zyljjm7o4
从验证规则生成纯函数,并仅在一个地方存储状态。它应该更清洁,也更适合测试。 https://codesandbox.io/s/r4v026lxno