React useEffect 延迟运行

Question

我有一张州地图。 map 包含坐标并作为道具转到 react-leaflet。我正在使用 useEffect 更新地图，但它工作晚了，初始值作为道具消失了。

const [map,setMap] = useState([0,0]);

useEffect(() => {
  const data = getIp();
  data.then(result => {
    setMap([result.lat,result.lon]);
  })
},[])

console.log(map);

console.log 视图：

Array [ 0, 0 ]
Array [ 36.8943, 30.7209 ]

Answer 1

根据 React 文档：https://reactjs.org/docs/hooks-reference.html

By default, effects run after every completed render, but you can choose to fire them only when certain values have changed.

因此您的 useEffect 将在第一次渲染后起作用，这是正常行为。

Answer 2

useEffect 挂钩在第一次渲染之后运行所以如果你想避免第一次渲染你可以在你的状态下使用加载器并使用它有条件地渲染内容：

const [loading, setLoading] = useState(true);

const [map,setMap] = useState([0,0]);

useEffect(() => {
  const data = getIp();
  data.then(result => {
    setMap([result.lat,result.lon]);
    setLoading(false);
  })
},[])

if (loading) return <p>Loading</p>;

return (
    ...your code
);

React useEffect 延迟运行

React useEffect is late runnig

leaflet

reactjs

react-leaflet