Реагировать установить значение переменной из обратного вызова из дочернего компонента - PullRequest
Новая
       150

Реагировать установить значение переменной из обратного вызова из дочернего компонента

0 голосов
/ 04 августа 2020

Я изучаю React, и мне нужна помощь в обнаружении проблемы с этим кодом и понимании того, что я делаю неправильно. Родительский компонент - MyMap, и ему нужны значения для Lat из его дочернего компонента, который является панелью поиска. Имя функции обратного вызова - setLatInfo, и она установит значение для переменной lat, определенной в useState.

Я вижу ошибку: присвоения переменной setLatInfo изнутри React Hook useEffect будут потеряны после каждого рендерить. Чтобы сохранить значение с течением времени, сохраните его в хуке useRef и сохраните изменяемое значение в свойстве .current. В противном случае вы можете переместить эту переменную непосредственно внутри useEffect.

в функции setLatInfo = (latInfo: number)

Как я могу назначить функцию обратного вызова в блоке useEffect? ​​

import SearchBar from "../components/SearchBar";

const MyMap: FunctionComponent = () => {
    const [lat, setLat] = useState();
  let setLatInfo: (latInfo: number) => void;

  useEffect(() => {
    const loadData = () => {
      
      // map?.map
     // (map as any)?.map.addLayer(h3Layer);
    };
  
    setLatInfo = (latInfo: number) => {   // this entire function is showing error 
      setLat(latInfo);
      console.log(lat);
      console.log(latInfo);
    };

  }, []);

  return (
    <div>
      <SearchBar
        parentCallbackLat={setLatInfo}
      />
    </div>
  );
};

1 Ответ

1 голос
/ 04 августа 2020

Лучше всего проверить синтаксис usCallback и то, как он работает, а также несколько примеров, чтобы вы могли точно понять, что с ним происходит. Базовый пример c для вашего варианта использования: 

const [lat, setLat] = useState();

const setLatInfo = useCallback(latInfo => {
    console.log(latInfo);
    setLat(latInfo);
},[setLat]);

useEffect(() => {
    setLatInfo("initial value");
}, [setLatInfo]);

return <SearchBar parentCallbackLat={setLatInfo} />;

Кроме того, чтобы вы знали, что изменения состояния React являются асинхронными c, и вы не можете распечатать их новые значения в следующей строке

...