更新存储后React中的useEffect不更新组件

Question

我不明白为什么 React 不更新我的对象。在另一个组件中，我通过调度更新了状态。在此（在下面的代码中）中，mapStateToProps 类别中的代码正在发生变化（控制台日志显示了另一个类别）。但是组件不会重新渲染，尽管在 useEffect 中的组件中我使用了 props.categories。事件 console.log in 元素不运行

const LeftSidebar = (props: any) => {
    console.log('not render after props.categories changed')
    useEffect(() => {
        props.dispatch(getCategories())
    }, [props.categories]);

    const addCategoryHandler = (categoryId: number) => {
        props.history.push('/category/create/' + categoryId)
    };

    return (
        <div className='left-sidebar'>
            <Logo/>
            <MenuSidebar categories={props.categories} onClickAddCategory={addCategoryHandler}/>
        </div>
    );
};

function mapStateToProps(state: State) {
    const categories = state.category && state.category.list;
    console.log('this categories changes, but LeftSidebar not changing')
    console.log(categories)
    return { categories };
}

export default connect(mapStateToProps)(LeftSidebar);

我想如果我更新状态，则根据此状态对更新组件做出反应。它应该如何工作？它应该如何工作？它可能有用，添加类别的项目不是父母或孩子，而是邻居 我的减速机

import {CATEGORIES_GET, CATEGORY_CREATE} from "../actions/types";

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

感谢您解决问题。所有问题都出在不可变数据上。我使用了固定装置，但没有正确复制数组

import {CATEGORIES_GET, CATEGORY_CREATE} from "./types";
import {categoryMenuItems as items} from "../../fixtureData";
import {NewCategory} from "../../types";

let categoryMenuItems = items; // My mistake, I used not immutable value. Not use fixtures for state))
let id = 33;

export function getCategories() {
    return {
        type: CATEGORIES_GET,
        payload: categoryMenuItems
    }
}

export function createCategory(newCategory: NewCategory) {
    id++
    const category = {
        title: newCategory.name,
        id: id
    };

    // MISTAKE I use same array, not cloned like let clonedCategoryMenuItems = [...categoryMenuItems]
    categoryMenuItems.push(category);

    return {
        type: CATEGORY_CREATE,
        payload: categoryMenuItems
    }
}

状态不使用fixture，使用真正的api :)

Answer 1

也许你的状态不是一成不变的。在你的 reducer 中使用扩展运算符添加新项目

{
    list: [
       ...state.list,
       addedCategory
    ]
}

代替

state.list.push(addedCategory)