Как использовать функцию prop внутри UseEffect? - PullRequest
Новая
       81

Как использовать функцию prop внутри UseEffect?

0 голосов
/ 19 июня 2020

Я хочу вызвать функцию prop внутри UseEffect. Следующий код работает: 

useEffect(() => {
    props.handleClick(id);
  }, [id]);

Но lint жалуется, что props не является зависимостью.

Если я сделаю это, то код больше не будет работать, и у меня будет максимальная ошибка повторного рендеринга: 

  useEffect(() => {
        props.handleClick(id);
      }, [id, props]);

Как я могу исправить проблему с ворсом?

Пример кода:

Родительский компонент 

const ParentGrid = ({rows, columns}) => {

  const [selection, setSelection] = useState(null);

  const handleClick = selectedRows => {
    setSelection(selectedRows.map(i => rows[i]));
  };

  return (
      <ChildGrid
        columns={columns}
        data={data}
        handleClick={handleClick}
      />

Дочерний компонент 

const ChildGrid = props => {
  const {data, handleClick, ...rest} = props;

  useEffect(() => {
    handleClick(selectedRows);
  }, [selectedRows]);

Ответы [ 2 ]

1 голос
/ 19 июня 2020

вы должны деструктурировать handleClick вне props

в начале компонента, у вас, вероятно, будет что-то вроде этого:

const myComponent = (props) =>

измените на

const myComponent = ({ handleClick, id }) в основном вы можете вытащить любой реквизит, который известен как их настоящее имя

, а затем использовать его так: 

useEffect(() => {
    handleClick(id);
  }, [id, handleClick]);

или, возможно, вам на самом деле не нужен функция как зависимость, поэтому это должно работать 

useEffect(() => {
    handleClick(id);
  }, [id]);
0 голосов
/ 19 июня 2020

Добавьте props.handleClick как зависимость 

useEffect(() => {
  props.handleClick(id);
}, [id, props.handleClick]);
...