Question

我使用useReducer遇到了无法修复的问题。

我的减速器看起来像这样：

const [ devices, dispatchDevices ] = useReducer(
    (state: Array<Device>, action: dispatchDevicesActionType) => {
        console.log(state);
        if (action.empty) return [];
        if (action.add) {
            console.log([ ...(state), Object.assign({}, action.add) ]);
            return [ ...(state), Object.assign({}, action.add) ];
        };
        // some other actions I'm not using yet
        return state;
    },
    []
);

我的状态是设备阵列，我尝试将设备添加到该阵列。我的第一个console.log总是输出一个空数组（即使在“添加”项目后调用时）。如预期的那样，第二个输出包含一个项目的数组。我不明白为什么状态无法正确更新。

我在这里调用调度方法：

const addDevice = useCallback(
    (item: Device) => dispatchDevices({ "add": item }),
    [ dispatchDevices ]
);

reducer和addDevice回调都位于名为useCart的钩子内。在我的功能组件内部，我使用了该钩子：

const { addDevice } = useCart();

点击按钮后，我致电addDevice以便将商品添加到购物车中。

const handleCartButtonClick = (ev: React.FormEvent) => {
    let dev = getDevice();
    dev.name = device.name;
    dev.price = device.price;
    dev.picture = device.picture;
    dev.deviceGroup = device.deviceGroup;
    if (addDevice) {
        addDevice(dev);
    } else {
        console.error("...");
    }
    resetDevice();
    navigate("/");
};

在测试时，我注意到当addDevice被调用一次时，调度方法被调用两次。我不知道这是否可能导致状态无法更新，我想应该不会。我宁愿想象这会导致将两个项目添加到状态数组，而不是一个。

我从不输入调度方法的action.empty部分（已经对其进行了测试）。

有什么想法可能会出问题吗？

React Reducer状态不会更新

0 个答案: