为什么 React 组件会无限更新

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
    }
}

这样，您将在分派操作后引用相同的按钮设置。