Передача функции от родителя к потомку через функциональный компонент React - PullRequest
Новая
       39

Передача функции от родителя к потомку через функциональный компонент React

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

Я пытаюсь передать функции setDir и handleSort() вниз с SearchAppointments (родительский) на Hooks (дочерний), но я продолжаю получать сообщения об ошибках, говорящие, что они не являются функциями.

Я попытался отладить его, посмотрев typeof handleSort в хук useEffect дочернего компонента, хотя в console.log записывались два утверждения: 1) недооценка 2) функция. Не уверен, что не так. 

const SearchAppointments = React.memo(() => {
  const [orderDir, setDir] = useState("");

  const handleSort = (e) => {
    let value = e.target.value;
    setDir(value);
    let order;
    let filterData = data;
    if (orderDir === 'asc') {
      order = 1;
    } else {
      order = -1;
    }
  };

  return (
    <>
      <div>
        <Hooks handleSort={handleSort} setDir={setDir} />
      </div>
    </>
  );
});


const Hooks = React.memo(({ handleSort, setDir }) => {
  useEffect(() => {
    console.log(typeof handleSort);
  }, []);

  return (
    <div>
      <div>
        <button type="button" onClick={() => setDir("success")}>
          Set Dir
        </button>
        <button type="button" value='asc' onClick={handleSort}>
          Handle Sort (Asc)
        </button>
        <button type="button" value='dsc' onClick={handleSort}>
          Handle Sort (Dsc)
        </button>
      </div>
    </div>
  );
});

1 Ответ

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

попробуйте и используйте memo вот так: 

const comparator = (previous, next) => {
    if (something) {
       return true
    }
    return false
}

const Hooks = React.memo(({ handleSort, setDir }) => {
  useEffect(() => {
    console.log(typeof handleSort);
  }, []);

  return (
    <div>
      <div>
        <button type="button" onClick={() => setDir("success")}>
          Set Dir
        </button>
        <button type="button" value='asc' onClick={handleSort}>
          Handle Sort (Asc)
        </button>
        <button type="button" value='dsc' onClick={handleSort}>
          Handle Sort (Dsc)
        </button>
      </div>
    </div>
  );
}, comparator);

определите функцию и передайте ее как второй аргумент. Функция memo (я назвал ее comparator, затем возвращает true или false в зависимости от того, когда вы хотите, чтобы компонент обновлялся. Думайте об этом как о новом shouldComponentUpdate в методах жизненного цикла. Но используйте с забота, так как ваше приложение может не обновляться, если вы неосторожно используете

...