时间戳

首页 > 解决方案 > 反应：useState过滤器数组不更新状态

reactjs - 反应：useState过滤器数组不更新状态

问题描述

编辑：

发生错误是因为我将数组作为第二个参数传递给useEffect. 即使数组中的值保持不变，引用也会不断变化，因此useEffect会不断被调用并重置我的复选框值。该数组是由useState调用创建的。我替换useState为useReducer（reducer 仅在对象实际更改时才更改对象引用）并更新了组件树更高层的一些缺失依赖项。

原始问题：

我无法更新功能组件中的状态。

我的问题有点类似于这个： React SetState doesn't call render

我已经在复制我的状态对象（通过使用 array.filter）而不是引用它；但我的状态仍然没有更新。

为了追查问题，我尝试在一个最小的示例中重新创建问题：

jsfiddle

但在我的最小示例中，一切都按预期工作。我无法重现该错误。

这是我的状态不更新的示例：

configCheckboxGroup.tsx：

import classNames from "classnames";
import React, { useState, useEffect } from "react";
import { Component } from "../../model";
import CheckboxPanel from "./panels/checkboxPanel";

interface configCheckboxGroupProps {
    className?: string;
    choices: Array<Component>;
    selected: Array<string>;
    addToCart: (items: Array<Component>) => void;
}

const ConfigCheckboxGroup: React.SFC<configCheckboxGroupProps> = ({
    className,
    choices,
    selected,
    addToCart,
}) => {

    const [ selectedComp, setSelectedComp ] = useState<Array<string>>(selected);

    // device loads later, selected has to be updated
    useEffect(() => {
        setSelectedComp(selected);
    }, [selected]);

    const handleOnChange = (ev: React.FormEvent, id: string) => {
        console.debug(id);
        console.debug(selectedComp.filter(el => el !== id));
        if (selectedComp.includes(id)) {
            // was already checked || this line is not working!
            setSelectedComp(selectedComp.filter(el => el !== id));
        } else {
            // was not checked
            setSelectedComp([...(selectedComp), id]);
        }

        const selected = choices.filter(el => selectedComp.includes(el.reference._id));
        addToCart(selected);        
    };

    return (
        <div className={classNames("panellist", className)}>
        {
            choices.map(el => {
                return (
                    <CheckboxPanel 
                        image={ el.reference.picture ? el.reference.picture : undefined }
                        name={ el.reference.name }
                        id={ el.reference._id }
                        price={ el.reference.price ? el.reference.price : 
                            el.price ? el.price : 0 } 
                        key={ el._id }
                        checked={ selectedComp.includes(el.reference._id) }  
                        onChange={ handleOnChange }
                    />
                )
            })
        }
        <span>
        { selectedComp }
            </span>
            </div>
    )
}

export default ConfigCheckboxGroup;

和 checkboxPanel.tsx：

import classNames from "classnames";
import React from "react";

import "./checkboxPanel.scss";

import noImage from "../../../resources/images/errors/no-image.svg";

interface PanelProps {
    className?: string;
    image?: string;
    name: string;
    id: string;
    price: number;
    checked: boolean;
    onChange: (ev: React.FormEvent, id: string) => void;
}

const CheckboxPanel: React.SFC<PanelProps> = ({
    className,
    image,
    name,
    id,
    price,
    checked,
    onChange,
}) => {

    const getImage = () => {
        if (image) {
            return image;
        } else {
            return noImage;
        }
    }

    return (
        <div className={classNames("panel", "checkbox-panel", className)}>
            <div className="top">
                <div className="image">
                    <img alt="Product" src={getImage()} />
                </div>
                <div className="name">
                    {name}
                </div>
            </div>
            <div className="bottom">
                <div className="category">
                    { Number(price).toFixed(2) } €
                </div>
                <div>
                    <input type="checkbox" 
                        checked={ checked }
                        onChange={ (e) => onChange(e, id) }
                    />                    
                </div>
            </div>
        </div>
    )

};

export default CheckboxPanel;

示例之间的唯一区别是，在第二个示例中，我在子组件中调用了句柄函数。但我在其他场合也做同样的事情：我有一个非常相似的组件 configRadioGroup，它带有单选按钮而不是复选框，一切正常。

我尝试通过手动过滤数组并尝试很多其他事情来玩弄，但似乎没有任何帮助。这就是为什么，作为最后一次尝试，我在这里问（尽管我知道这个问题不是一个好问题，因为它非常具体）。

标签： reactjstypescriptreact-hooks

解决方案

如果您在 useEffect 中放置控制台日志，更改道具selected将重置selectedComp，您可能会发现每次都会重置它。

您需要追踪 selected 来自哪里（redux？）以及它是如何设置的（addToCart？）。

一个肮脏的修复可能是仅selectedComp在组件安装时设置，这是肮脏的并且将/应该导致 react-hooks/exhaustive-deps lint 触发：

useEffect(() => {
  setSelectedComp(selected);
}, []);

但是最好找出问题所在selected，如果它来自 redux，那么也许只是使用selected而不是忘记，selectedComp因为这只是一个副本。

推荐阅读