从嵌套功能中调用钩子

Question

我使用钩子创建了一个功能组件myComponent。我想知道将setState传递到另一个函数渲染列表是否可以吗？我尝试的工作正常，但是根据Hooks Docs：仅在顶层呼叫挂钩。在循环，条件或嵌套功能中，请勿调用挂钩。这种情况是否算作嵌套功能的调用挂钩？

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>
  );
}

Answer 1

将设置器传递到函数的上述方式是完全可以的，并且不算为

的方案

仅在顶层调用钩子。不要在循环中呼叫钩子， 条件或嵌套功能

因为您实际上是在功能组件顶部调用挂钩useState。由useState返回的设置器，并通过将其作为支撑传递给儿童组件或返回JSX Elements

的功能来在任何地方调用

您唯一需要照顾的是，您不是直接呈现渲染，而是在事件或效果上调用二传器。

P.S。您需要纠正一些句法错误 您的代码

工作演示

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