无法使用 useState 挂钩访问 prevState答案

【问题标题】：Can't access prevState with useState hook无法使用 useState 挂钩访问 prevState
【发布时间】：2021-02-19 15:23:09
【问题描述】：

我有一个组件，我试图在其中捕获某些东西的 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
}

我尝试创建一个usePrevious 函数，如https://reactjs.org/docs/hooks-faq.html#how-to-get-the-previous-props-or-state 所示，但它总是会返回undefined，所以我现在有点卡住了。

【问题讨论】：

你有没有试过不把它变成const？
@JacoboTapia 喜欢将previousLocation 设为let 并分配值？是的。不管怎样，prevState 似乎总是 activeLocation 初始状态，所以这就是当前分配的状态。
@JacoboTapia 好的，我已经改变了一点，在单步调试调试器之后，activeLocation 似乎总是默认回到它的初始状态，我不知道它为什么这样做。

标签： javascript reactjs next.js use-state

【解决方案1】：

也许自定义挂钩可以帮助您？

也许 usePrevious 可以在不向您的实际组件添加样板的情况下解决这个问题

【讨论】：

试过它对我来说返回的结果几乎相同。
很抱歉听到这个消息。我一直在考虑一种解决方法，也许有一系列位置而不是只有一个可以提供帮助。这样，当您设置一个新的时，您会执行类似 setLocations(prev => [...prev, newLocation]) 的操作，然后使用所述数组中的最后一个元素执行逻辑

【解决方案2】：

也许会有所帮助。

const onClick = useCallback(({ location: { id, isActive, location } }) => {
  setActiveLocation((prevState: PreviousLocation) => {
    console.log("previousState", prevState);
    return new Map(prevState).set(id, isActive, location);
  });
}, []);

【讨论】：