从嵌套函数调用钩子

IT技术 reactjs react-hooks
2021-04-30 10:37:00

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

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>
  );
}
1个回答

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

只在顶层调用 Hooks。不要在循环、条件或嵌套函数中调用 Hook

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

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

PS 虽然您需要在代码中纠正一些语法错误

工作演示

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" />

其它你可能感兴趣的问题
上一篇当我们使用 this.props.history.push("/next Component") 移动到下一个组件时，我们可以传递一个值吗？ 下一篇React/Redux bundle.js 太大了