Question

我使用钩子创建了功能组件MyComponent。我想知道是否可以将setState传递给另一个函数renderList吗？我试过了，但根据hooks文档：仅在顶层调用Hooks。不要在循环，条件或嵌套函数中调用Hook。这种情况是否算作从嵌套函数中调用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>
  );
}

Answer 1

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

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

因为您实际上是在功能组件的顶部调用钩子useState。 useState返回的setter可以在任何地方调用，方法是将它作为道具传递给子组件或返回JSX元素的函数

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

。

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

从嵌套函数调用钩子

1 个答案: