从嵌套函数调用钩子 [英] Call hook from nested functions

问题描述

我使用钩子创建了一个功能组件 MyComponent.我想知道将 setState 传递给另一个函数 renderList 是否可以?我试过它工作正常，但根据 hooks 文档:只在顶层调用 Hooks.不要在循环、条件或嵌套函数内调用 Hook. 这种情况是否算作从嵌套函数调用钩子?

const MyComponent = (listProps) {const [state, setState] = useState(false);返回 (<div>renderList(listProps, setState);

);}渲染列表(listProps，setState){返回 (<ul>{listProps.map(item => {//在这里用一个值调用 setState();return

{item}

;});});}

解决方案

上述将 setter 传递给函数的方式非常好，并不算作

的场景<块引用>

仅在顶层调用 Hook.不要在循环内调用 Hook，条件或嵌套函数

因为您实际上是在调用函数组件顶部的钩子 useState.useState 返回的 setter 可以在任何地方调用，可以通过将其作为 prop 传递给子组件或传递给返回 JSX 元素的函数

您唯一需要注意的是，您不是在渲染中直接调用 setter，而是在事件或效果中调用 setter.

<块引用>

附言有一些语法错误需要纠正你的代码虽然

工作演示

const MyComponent = ({listProps}) =>{const [state, setState] = React.useState('');返回 (<div>{renderList(listProps, setState)}

);}const renderList = (listProps, setState) =>{返回 (<ul>{listProps.map(item => {//在这里用一个值调用 setState();return

setState(item)}>{item}</li>;})});}ReactDOM.render(<MyComponent listProps={['First', 'Second', 'Third']}/>, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script><script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script><div id="root"/>

I created a functional component MyComponent using hooks. I would like to know if it is fine to pass setState to another function renderList? I tried it works fine but according to hooks docs: Only call Hooks at the top level. Don’t call Hooks inside loops, conditions, or nested functions. Does this case count as calling hook from nested functions?

const MyComponent = (listProps) {
  const [state, setState] = useState(false);
  return (
    <div>
      renderList(listProps, setState);
    </div>
  );
}

renderList(listProps, setState){
  return (
    <ul>
     {
       listProps.map(item => {
         // call setState() with a value here;
         return <li>{item}</li>;
       });
     }
    </ul>
  );
}

解决方案

The above manner of passing the setter to a function is perfectly fine and doesn't count as a scenario for

Only call Hooks at the top level. Don’t call Hooks inside loops, conditions, or nested functions

because you are actually calling the hook useState at the top of the functional component. The setter returned by useState and be called anywhere, either by passing it as a prop to child component or to a function returning JSX elements

The only thing that you need to take care of is that you are not calling the setter in render directly, but on an event or in an effect.

P.S. There are some syntactical errors that you need to rectify in your code though

Working demo

const MyComponent = ({listProps}) => {
  const [state, setState] = React.useState('');
  return (
    <div>
      {renderList(listProps, setState)}
    </div>
  );
}

const renderList = (listProps, setState) =>{
  return (
    <ul>
     {
       listProps.map(item => {
         // call setState() with a value here;
         return <li onClick={() => setState(item)}>{item}</li>;
       })
     }
    </ul>
  );
}

ReactDOM.render(<MyComponent listProps={['First', 'Second', 'Third']} />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.8.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.8.3/umd/react-dom.production.min.js"></script>
<div id="root" />

这篇关于从嵌套函数调用钩子的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！