在React中有条件地创建一个钩子吗?

huangapple go评论70阅读模式
英文:

Conditionally create a hook in React?

问题

我有一个组件,它有两种状态:

  • 简单状态,具有最小功能
  • 扩展状态,具有更多可选择的设置

扩展版本将具有显著更多的变量和 redux 调用。
我想知道在 React 中是否可以只在传递了特定的 prop 时创建某些变量?

例如:

const [var1, setVar1] = useState(props.var1); 
if(extended){
  const reduxState = useSelector(rootState);
  const settings = useSelector(settingsData);
  const {ref, inView} = useInView({
    rootMargin: '0px 0px 0px 0px',
    threshold: 0.0,
  });
  const [extraVar, setExtraVar] = useState(props.initExtraVar);
}
英文:

I have a component that has two states:

  • simple, with minimal functionality
  • extended, when it has more settings to choose from

Extended version will have significantly more variables and redux calls.
I was wondering if it's possible in React to create certain variables only if specific prop was passed?

for example:

const [var1, setVar1] = useState(props.var1); 
if(extended){
  const reduxState = useSelector(rootState);
  const settings = useSelector(settingsData);
  const {ref, inView} = useInView({
    rootMargin: '0px 0px 0px 0px',
    threshold: 0.0,
  });
  const [extraVar, setExtraVar] = useState(props.initExtraVar);
}

答案1

得分: 2

这将违反Hooks规则,这些规则要求在每次渲染时以相同的顺序调用相同的Hooks:

> 仅在顶层调用Hooks
>
> 不要在循环、条件或嵌套函数内调用Hooks。相反,在React函数的顶层之前的任何早期返回之前始终使用Hooks。遵循这个规则,您确保Hooks每次组件渲染时以相同的顺序调用。这就是让React正确保留Hooks状态在多次useState和useEffect调用之间的原因。

您可以有条件地使用或不使用Hooks的results,但不能有条件地调用Hooks本身。

英文:

This would violate the rules of hooks, which require that the same hooks be invoked in the same order on every render:

> Only Call Hooks at the Top Level
>
> Don’t call Hooks inside loops, conditions, or nested functions. Instead, always use Hooks at the top level of your React function, before any early returns. By following this rule, you ensure that Hooks are called in the same order each time a component renders. That’s what allows React to correctly preserve the state of Hooks between multiple useState and useEffect calls.

You can conditionally use or not use the results of the hooks, but can't conditionally invoke the hooks themselves.

答案2

得分: 0

You cannot call a hook as useSelector or useInView or useState conditionally you may run into the famous "more hooks called than the previous render".

所以,你必须无论如何调用它们,并在条件满足时传递null或你想要的值,类似这样:

const reduxState = useSelector(rootState);
const settings = useSelector(settingsData);
const {ref, inView} = useInView({
  rootMargin: '0px 0px 0px 0px',
  threshold: 0.0,
});
// 从我理解的来看,如果"extend"未定义,"props.initExtraVar"可能会是undefined,所以你可以这样处理它:
const test = extend ? props.initExtraVar : null;
const [extraVar, setExtraVar] = useState(test);

没有任何条件。

英文:

you cannot call a hook as useSelector or useInView or useState conditionally you may run into the famous "more hooks called than the previous render".<br>

so you have to call them anyway and pass eaither null or the value you want if the condition is met, something like this :

const reduxState = useSelector(rootState);
const settings = useSelector(settingsData);
const {ref, inView} = useInView({
  rootMargin: &#39;0px 0px 0px 0px&#39;,
  threshold: 0.0,
});
// from what I understood &quot;props.initExtraVar&quot; may be undefined if &quot;extend&quot; is undefined so you can handle it this way:
const test = extend ? props.initExtraVar : null;
const [extraVar, setExtraVar] = useState(test);

without any condition

huangapple
  • 本文由 发表于 2023年6月30日 01:59:10
  • 转载请务必保留本文链接:https://go.coder-hub.com/76583544.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定