Question

我很好奇，为什么会发生这种情况。我知道，一切都按预期进行，并且我误解了这种行为。我正在为React-redux和react使用新的hooks API。

const Categories = () => {
    const dispatch = useDispatch();
    const categoriesList = useSelector((state) => state.categories.categoriesList, shallowEqual);
    // const isFetching = useSelector((state) => state.categories.isFetching);
    console.log(categoriesList, 'categoriesList');
    useEffect(() => {
        dispatch(getCategoriesList());
        dispatch(getTemplatesList());
    }, [dispatch]);

    return (
        <ul className='categories-list'>
            {categoriesList.map((category) => {
                const {Fields: {Title, ID, IsActive, Path} = {}, SubCategoryList = []} = category;

                return (
                    <CategoryItem
                        isActive={IsActive}
                        categoriesList={categoriesList}
                        categoryID={ID}
                        // isFetching={isFetching}
                        changeCategoryStatus={changeCategoryStatusRequest}
                    />
                );
            })}
        </ul>
    );
};

categoriesList的结构如下

[
    {Info: {/**some info */}, SubCategoryList: [/**same structur like categoriesList */]},
    {Info: {/**some info */}, SubCategoryList: [/**same structur like categoriesList */]},
    {Info: {/**some info */}, SubCategoryList: [/**same structur like categoriesList */]},
    {Info: {/**some info */}, SubCategoryList: [/**same structur like categoriesList */]},
    {Info: {/**some info */}, SubCategoryList: [/**same structur like categoriesList */]},
];

单击某些按钮后，在我的 CategoryItem 组件内，它分派一个动作，该动作将获取特定类别的新数据，其主要目的是更改属性isActive。获取新数据后，我更新了categoriesList，它可能是X级最深的类别，其isActive的支持将会改变。更改后，假定categoriesList已更新（甚至深度更新）。但是我的组件不会再次运行，也不会更新isActive状态。实际上，组件收到了该道具，我认为应该重新渲染它。您可以注意到，我评论了isFetching属性（在获取新数据并更新categoriesList之后，该属性也已更改）。有了该属性，我的组件将再次呈现并更改isActive prop。乍一看，我认为问题是嵌套的值，但是我在sandbox中用另一个react-redux项目对其进行了测试。在这种情况下，组件会在value更改后呈现。

deep: {
    deep2: {
      value: 0
    }
  }

那么主要区别是什么？我如何正确理解它？预先感谢。

已更新-Here is my reducer

import * as types from '../types';
import {createReducer} from '../../helpers/utilities';
import _ from 'lodash';

const initialState = {
    categoriesList: [],
    actionResult: null,
    isFetching: false,
    category: {},
};

const changeCategoryStatus = (state, action) => {
    const {payload} = action;

    const updateFunction = (category) => {
        if (category.Fields.ID === payload.ID) {
            category.Fields.IsActive = payload.IsActive;
            return false;
        }
        Array.isArray( category.SubCategoryList) && _.forEach(category.SubCategoryList, updateFunction);
    };

    const changedCategoriesList = _.forEach(state.categoriesList, updateFunction);

    return updateStore(state, {
        actionResult: hasError(payload) ? {
            type: 'error',
            message: payload.message,
        } : null,
        isFetching: false,
        categoriesList: changedCategoriesList,
    });
};

const handlers = {
    [types.CATEGORY_STATUS_RESPONSE]: changeCategoryStatus,
};

export default createReducer(initialState, handlers);

Redux存储更改后，为什么连接的React组件没有更新？

0 个答案: