时间戳

首页 > 解决方案 > 从子组件的回调中反应设置变量值

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

问题描述

我正在学习 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>
  );
};

标签： reactjsuse-effectuse-statereact-functional-component

解决方案

最好检查一下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 状态更改是异步的，你不能在下一行打印它们的新值

推荐阅读