[英]Using nested hooks to update state
我试图弄清楚如何使用嵌套的钩子来更新父组件中的状态。 我最近了解到,钩子基本上遵循相同的setState()异步更新模式,但是我正在努力寻找解决方法。
我有3个自定义钩子:
useValidateContent
:用于验证特定表单的自定义钩子。
useValidateRuleOne
:用于验证特定规则的自定义钩子。
useValidateRuleTwo
:用于验证另一个特定规则的自定义钩子。
我想用useValidateRuleOne
和useValidateRuleTwo
在useValidateContent
和更新点击ParentComp。 现在,需要两下单击才能显示消息。
使用嵌套的自定义挂钩的正确方法是什么,以便在首次运行时首先更新状态。
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
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.