Перехват вызова из вложенных функций - PullRequest
Новая
       4

Перехват вызова из вложенных функций

1 голос
/ 18 марта 2019

Я создал функциональный компонент MyComponent с помощью хуков.Я хотел бы знать, нормально ли передавать setState другой функции renderList?Я попробовал, он работает нормально, но в соответствии с документами о хуках: Вызывайте хуки только на верхнем уровне.Не вызывать Hooks внутри циклов, условий или вложенных функций. Считается ли этот случай вызывающим хуком из вложенных функций? 

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 Ответ

1 голос
/ 18 марта 2019

Описанный выше способ передачи установщика в функцию совершенно нормален и не считается сценарием для

. Вызывает только хуки на верхнем уровне.Не вызывайте Hooks внутри циклов, условий или вложенных функций

, потому что вы на самом деле вызываете hook useState в верхней части функционального компонента.Сеттер возвращается useState и вызывается в любом месте, передавая его как реквизит дочернему компоненту или функции, возвращающей элементы JSX

Единственное, о чем вам нужно позаботиться, это то, что вы невызов сеттера непосредственно при рендеринге, но при событии или эффекте.

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