![](/img/trans.png)
[英]How to set the initial value of useState with the value of another state set in a useEffect hook?
[英]Set a state from useState without triggering useEffect hook
我想防止触发在依赖数组中包含 useState 值的 useEffect 挂钩。 为了清楚起见,请看示例。
在初始化过程中,表单会设置一些值,因此我定义了一个标志以防止在完全初始化之前执行其他效果,但我也不想在初始化标志 state 更改时触发第二个效果。
我可以以某种方式阻止跟踪这个isInitialization
state 吗? 我找不到可以解决我的问题的线程。 您是否愿意链接与此相关的线程? 提前致谢。
export function SomeComponent(props) {
const [form] = useForm();
const [settings, setSettings] = useState(props.initialSettings);
const [isInitialization, setIsInitialization] = useState(true);
/**
* Updates the form settings state, just for initialization
*/
useEffect(() => {
if (isInitialization) {
form.setFieldsValue({
...settings,
});
setIsInitialization(false); // <-- This should not trigger any useEffect
}
}, [settings, form, isInitialization]);
useEffect(() => {
if (props.settingsChanges && !isInitialization) {
props.settingsChanges(settings, isValid && hasRequiredFields);
}
}, [settings, props, isInitialization]);
}
尝试从依赖数组中删除isInitialization
。
useEffect(() => {
if (isInitialization) {
form.setFieldsValue({
...settings,
});
setIsInitialization(false); // <-- This should not trigger any useEffect
}
}, [settings, form]);
如果你想运行一个效果并且只清理一次(在挂载和卸载时),你可以传递一个空数组([])作为第二个参数。 这告诉 React 你的效果不依赖于 props 或 state 的任何值,所以它永远不需要重新运行。 这不是作为特殊情况处理的——它直接遵循依赖项数组的工作方式。
更新:
构建自己的 Hooks 可以让您将组件逻辑提取到可重用的函数中。
如果是通用逻辑,那么您可以创建自定义钩子并跨组件共享。
«useMyCustomHook.jsx» 文件:
import { useEffect } from 'react';
export default function useMyCustomHook(str) {
useEffect(() => {
console.log(`title`, title);
});
}
然后在组件中使用它:
function fooFunction(props) {
const [firstName, setFirstName] = useState('');
useMyCustomHook(`This is ${firstName}`);
return (
<div>The firstname is {firstName}</div>
);
}
特别感谢@Martin。 这个解决方案实际上并没有解决跳过 useEffect 触发的问题,而是帮助我进一步重构了我的代码。 也许这无关紧要,但我仍然想与您分享我的结果:
最后它看起来像这样。 不再需要初始化标志,因为自定义钩子已经这样做了:
const useAntForm = (initalData) => {
const [form] = useForm();
form.setFieldsValue({
...initalData,
});
return form;
};
export function SomeComponent({
settingsChanges,
initialSettings,
}: SettingsProps) {
const form = useAntForm(initialSettings);
const [settings, setSettings] = useState(initialSettings);
const [isValid, setIsValid] = useState(false);
.
.
.
}
根据https://reactjs.org/docs/hooks-rules.html可以在useEffect
挂钩中忽略不应该触发重新渲染的依赖项。 通常在忽略依赖项时会说
React Hook useEffect 缺少依赖项:'someDependency'。 包括它或删除依赖数组。
为了解决这个问题,您只需将https://www.npmjs.com/package/eslint-plugin-react-hooks添加到您的 eslint 配置中,该配置主要位于package.json
文件中
我的配置现在看起来像:
package.json
{
...
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
],
"plugins": [
"react-hooks" // <-- Added this
]
},
...
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.