React Redux 功能组件更新 state 不工作

Question

My data looks like this:

{

  '004': [
      {
          year_week: '2020-W1',
          actual_bank_amount: '6500000',
          ext_in_rental_income: '',
          ext_in_tax_refund: '',
          ext_in_dividends_income: ''
      },
      {
          year_week: '2020-W2',
          actual_bank_amount: '6500000',
          ext_in_rental_income: '',
          ext_in_tax_refund: '',
          ext_in_dividends_income: ''
      }

  ],
  '007': [
      {
          year_week: '2020-W22',
          actual_bank_amount: '65050000',
          ext_in_rental_income: '30000',
          ext_in_tax_refund: '',
          ext_in_dividends_income: ''
      }

  ]
},

I am trying to update say date for year_week '2020-W1' in '004'.

No problem with action and reducer but data is not updated in the list.

Below is my reducer:

case 'UPDATE':
  state.planningData[action.payload.currentSite].map((item, index) => {
    if (item.year_week === action.payload.data.year_week) {
      return Object.assign({}, item, action.payload.data);
    }
    return item;
  });
  console.log(state)

  return {
    loading: true,
    planningData: state.planningData,
    error: ''
  }

What I am doing wrong please. Btw when I do console log or run redux extension I see the updated state.

Below is my action creator:

export const update = (data) =>

    (dispatch, getState) => {
        console.log("Update action called" + JSON.stringify(data))
        const currentSite = getState().sites.currentSite;
        dispatch({
            type: 'UPDATE',
            payload: {
                data: data,
                currentSite: currentSite
            }

        });
    };

btw I am calling it from a editable cell component on "enter" and blur event below is my code

 const save = async e => {
        try {
            const values = await form.validateFields();

            toggleEdit();
            dispatch(update({ ...record, ...values }));
        } catch (errInfo) {
            console.log('Save failed:', errInfo);
        }
    };

Answer 1

This isn't pretty but it works. You had a bit of nested data in your state and it wasn't being updated properly.

    case "UPDATE":
      let updatedPlanningData = {};
      for (let prop in state.planningData) {
        if (prop === action.payload.currentSite) {
          updatedPlanningData[action.payload.currentSite] = state.planningData[
            action.payload.currentSite
          ].map((item, index) => {
            if (item["year_week"] === action.payload.data.year_week) {
              return Object.assign({}, item, action.payload.data);
            }
            return item;
          });
        } else {
          updatedPlanningData.prop = state.planningData[prop];
        }
      }
      return {
        loading: true,
        planningData: updatedPlanningData,
        error: ""
      };

Here is example code in codesandbox

Edit: more compact solution

let updatedPlanningData = {...state.planningData};

updatedPlanningData[action.payload.currentSite].map((item, index) => {
        if (item["year_week"] === action.payload.data.year_week) {
          return Object.assign(item, action.payload.data);
        }
        return item;
      });