Question

我有一个非常简单的组件，但是由于某种原因它无限地更新和更新。我什么都没改变，但反应更新组件。为什么？

我的动作

export function getMouseMenuButtons() {

    const a = {
        bold: {
            id: 1,
            name: 'bold',
            children: {
                bold: {
                    id: 1,
                    name: 'bold',
                },
                calendar: {
                    id: 2,
                    name: 'calendar'
                },
            }
        },
    }

    return {
        type: MOUSE_MENU_BUTTONS_GET,
        payload: a
    }
}

我的减速器：

export default function (state={}, action: any) {
    switch (action.type) {
        case MOUSE_MENU_BUTTONS_GET:
            return {...state, map: action.payload};
        default: return state;
    }
}

还有我的组件

const MenuCircles = (props: Props) => {


    useEffect(() => {
        props.dispatch(getMouseMenuButtons())
    }, [props.buttons]);




    return (
        <React.Fragment>
            dfdf
        </React.Fragment>
    );
};

function mapStateToProps(state: State) {
    const buttons = state.mouseMenu && state.mouseMenu.map;

    return { buttons };
}

export default connect(mapStateToProps)(MenuCircles);

为什么总是更新。在useEffect中，我检查props.buttons。他们总是一样

Answer 1

因此，由于您正在构造引用的新对象，并且无条件地将其添加到reducer中，因此每次运行都会获得全新的state.mouseMenu。

解决此问题的最简单方法是将对象声明移出动作创建者：

const defaultButtons = {
    bold: {
        id: 1,
        name: 'bold',
        children: {
            bold: {
                id: 1,
                name: 'bold',
            },
            calendar: {
                id: 2,
                name: 'calendar'
            },
        }
    },
};
export function getMouseMenuButtons() {
    return {
        type: MOUSE_MENU_BUTTONS_GET,
        payload: defaultButtons
    }
}

通过这种方式，您将在调度动作后设置与参考相同的按钮。

为什么React组件会无限更新

1 个答案: