使用嵌套的鈎子來更新狀態

Question

我試圖弄清楚如何使用嵌套的鈎子來更新父組件中的狀態。 我最近了解到，鈎子基本上遵循相同的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> 

Answer 1

根據Hooks API，您不應有條件地或在嵌套函數內部調用一個鈎子。 https://reactjs.org/docs/hooks-rules.html#only-call-hooks-at-the-top-level

解決此問題的一種方法是添加useEffect，它會在您指定的依賴項發生更改時觸發。 這是一個工作示例： https : //codesandbox.io/s/5zyljjm7o4

Answer 2

根據驗證規則制作純函數，並將狀態僅存儲在一個地方。 它應該更清潔，也更適合測試。 https://codesandbox.io/s/r4v026lxno