Javascript React useRef hook:useState函数不能使用useRef值
在我问这个问题之前,我自然而然地做了一次搜索,发现: 在我解释了一些序言之后,我将在一秒钟内展示我的实现 本质上,我的问题是useState中的updater函数没有同步更新,它在获取的数据中落后了一步 useState函数被传递给一个对象,该对象包含和id、lat和langJavascript React useRef hook:useState函数不能使用useRef值,javascript,reactjs,use-state,use-ref,Javascript,Reactjs,Use State,Use Ref,在我问这个问题之前,我自然而然地做了一次搜索,发现: 在我解释了一些序言之后,我将在一秒钟内展示我的实现 本质上,我的问题是useState中的updater函数没有同步更新,它在获取的数据中落后了一步 useState函数被传递给一个对象,该对象包含和id、lat和lang currentCoords: [{id: 1, lat: 40.74003514370453, lng: -73.76452126968704}] markers: [{id: 0, lat: 40.74168820148
currentCoords: [{id: 1, lat: 40.74003514370453, lng: -73.76452126968704}]
markers: [{id: 0, lat: 40.74168820148129, lng: -73.76539693565009},…]
0: {id: 0, lat: 40.74168820148129, lng: -73.76539693565009}
1: {id: 1, lat: 40.74003514370453, lng: -73.76452126968704}
currentCoords应镜像标记数组。正如你所见,这是“设置”第二个
所以我知道这两种情况,因为setState和useState是异步的,所以不能依赖于正在更新的状态
这就是我所尝试的:
useEffect(() => {
if (userMarkers.length === 1) {
userMarkersRef.current = userMarkers[0]; // {id: 0, lat: 40.74168820148129, lng: -73.76539693565009}
setUserCoords(userMarkersRef.current);
setIsRoutingVisibileFalse();
}
if (userMarkers.length === 2) {
userMarkersRef.current = userMarkers[1]; // {id: 1, lat: 40.74003514370453, lng: -73.76452126968704}
setUserCoords(userMarkersRef.current);
}
}, [JSON.stringify(userMarkers)]);
我已经在useffect
依赖项中包含了一个数组,当它(useMarkers)发生变化时,该数组已经被字符串化以启动钩子(不用担心数组永远不会超过两个项!)
我的做法是保存一个显式引用,然后将其传递给可以工作的更新程序,但它不能:(
这是setState函数,用于将其保存到本地存储器:
setUserCoords: coords => {
setUser({
...user,
currentCoords: [{ ...user.currentCoords[coords.id], ...coords }]
});
},
本质上,我的问题是useState中的更新程序函数不可用
同步更新时,它在获取的数据中落后
似乎通过setUser
内部的闭包引用的user
是过时的
由于下一个状态取决于上一个状态,因此可以使用另一种形式的setState
获取上一个状态的最新快照
i、 e-
从:
更新程序函数接收的状态和道具都是有保证的
更新程序的输出与
国家
userMarkers从何而来?您好!它也是存储在local-storage中的用户对象上的一个数组。感谢您的响应!我尝试了您的解决方案,得到了
TypeError:无法读取属性“currentCoords”未定义的
`完整的状态是什么样子的设置用户设置的?很抱歉延迟…var initialState={avatar:'/static/uploads/profile avatars/placeholder.jpg',isroutingvisible:false,removeoutingmachine:false,markers:[],currentMap:{},currentCoords:[];
setUserCoords: coords => {
setUser((prevState) => {
return {
...prevState.user,
currentCoords: [{ ...prevState.user.currentCoords[coords.id], ...coords }]
}
});
},