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

Question

我正在学习 React，需要一些帮助来找出此代码的问题并了解我没有做错什么。父组件是 MyMap，它需要来自其子组件 Search bar 的 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 状态变化是异步的，你不能在下一行打印它们的新值

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

React set variable value from a call back from child component

reactjs

use-effect

react-functional-component

use-state