无法使用useState挂钩访问prevState
无法使用useState挂钩访问prevState
提问于 2020-11-07 06:18:12
我有一个组件，我试图捕获某个东西的previousState，但不管是什么，它都会返回初始值。这让我相信正在发生重新渲染，所以它一直默认为初始状态。
import React, { useState } from "react";
import { InfoWindow } from "../info-window/info-window";
import { LocationProps } from "../../../interfaces/location-inteface";
export interface Props {
lat: number;
lng: number;
location: LocationProps;
}
type PreviousLocation = {
isActive: boolean;
location: Props["location"];
};
export const InStoreMarker: React.FC<Props> = (props: Props) => {
const { location } = props;
const [isActive, setIsActive] = useState(false);
const [infoWindowVisible, setActiveInfoWindowVisible] = useState(false);
const [activeLocation, setActiveLocation] = useState({
isActive: false,
location: null
});
const [previousLocation, setPreviousLocation] = useState(null);
const onClick = (location: LocationProps, prevLocation: PreviousLocation) => {
setIsActive(true);
setActiveInfoWindowVisible(true);
setPreviousLocation(prevLocation);
setActiveLocation({
isActive: true,
location: location,
});
console.log("Click previousLocation", previousLocation);
console.log("Click location", location);
};
const onClose = (value: boolean) => {
setIsActive(value);
setActiveInfoWindowVisible(value);
};
useEffect(() => {
console.log("activeLocation", activeLocation);
console.log("previousLocation", previousLocation);
}, [previousLocation, activeLocation]);
return (
<div className={styles.inStoreMarkerContainer}>
{isActive && infoWindowVisible && (
<InfoWindow
location={location}
onClose={onClose}
/>
)}
<div
className={styles.inStoreMarker}
onClick={() => onClick(location, activeLocation)}
/>
</div>
);
}setActiveLocation回调中的控制台日志不断返回
{
id: null,
isActive: false,
location: null
}我尝试创建一个https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state所示的usePrevious函数，但是总是返回undefined，所以我现在有点卡住了。
回答 2
Stack Overflow用户
发布于 2020-11-07 06:53:10
也许一个定制的钩子可以帮助你？
也许 usePrevious可以在不向实际组件添加样板的情况下解决这个问题
Stack Overflow用户
发布于 2020-11-07 06:51:27
也许这会对你有所帮助。
const onClick = useCallback(({ location: { id, isActive, location } }) => {
setActiveLocation((prevState: PreviousLocation) => {
console.log("previousState", prevState);
return new Map(prevState).set(id, isActive, location);
});
}, []);
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/64722310
复制相关文章
相似问题
腾讯云开发者
