reactjs - react : useState filter array not updating state

Question

编辑:

我的错误发生是因为我将数组作为第二个参数传递给 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;

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

我尝试通过手动过滤数组并尝试很多其他方法来尝试，但似乎没有任何帮助。这就是为什么，作为最后一次尝试，我在这里问(虽然我知道这个问题不是一个好问题，因为它非常具体)。

Answer 1

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

您需要追踪所选内容的来源(redux？)及其设置方式(addToCart？)。

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

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

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