从子组件的回调中反应设置变量值

Question

我正在学习 React，需要一些帮助来找出这段代码的问题并了解我做错了什么。父组件是 MyMap，它需要来自其子组件（搜索栏）的 Lat 值。 回调函数名称为 setLatInfo，它将为 useState 中定义的 lat 变量设置值。

我看到的错误是 React Hook useEffect 内部对“setLatInfo”变量的赋值将在每次渲染后丢失。要随着时间的推移保留该值，请将其存储在 useRef Hook 中，并将可变值保留在 '.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>
  );
};

Answer 1

最好查看usCallback 语法及其工作原理，以及一些示例，以便您准确了解它发生了什么。您的用例的一个基本示例是：

const [lat, setLat] = useState();

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

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

return <SearchBar parentCallbackLat={setLatInfo} />;

另外，你知道 React 状态变化是异步的，你不能在下一行打印它们的新值