javascript - TS with Redux Slices: valueService.js:205 Uncaught TypeError: Cannot assign to read only property 'dis' of object '#<object>' <div id="body"><p>I can't seem to figure out what's causing the above issue, and debug properly. From my understanding of Redux S

问题描述

I can't seem to figure out what's causing the above issue, and debug properly. From my understanding of Redux Slices, I'm able to directly mutate state in my reducer due to the Immer functionality built-in. If I hard code the redux JSON into the UI component there are no issues which leads me to believe it's a Redux issue. Any advice would be appreciated.

Slice.ts


interface LoadSchedulerState {
  gridData: DataRow[] | null,
}
interface DataRow {
  id: number,
  dis: string,
  hour: string
}

const initialState: LoadSchedulerState = {
  gridData: null,
}

export const loadSchedulerSlice = createSlice({
  name: 'load_scheduler',
  initialState,
  reducers: {
    updateGridData: (state, action:  PayloadAction<DataRow>) => {
      let newData = [{...action.payload}]
      return {...state, gridData:newData}
    },
  },
});

export const {updateGridData} = loadSchedulerSlice.actions;
export const gridData = (state: { loadScheduler: { gridData: any; }; }) => state.loadScheduler.gridData;
export default loadSchedulerSlice.reducer;

LoadScheduler.ts

import { AgGridColumn, AgGridReact } from "@ag-grid-community/react";
import HeaderGroupComponent from "./HeaderGroupComponent.jsx";
import LoadHeaderComponent from "./LoadHeaderComponent.jsx";
import BtnCellRenderer from './BtnCellRenderer';
import {
  AllModules,
  ColumnApi,
  GridApi,
  GridReadyEvent,
} from "@ag-grid-enterprise/all-modules";
import "../../styles/DemoGrid.css";
import { updateGridData, gridData } from "./loadSchedulerSlice";
import { useDispatch, useSelector } from 'react-redux';

const LoadSchedulerGrid = () => {
  const [gridApi, setGridApi] = useState<GridApi>();
  const [columnApi, setColumnApi] = useState<ColumnApi>();
  const [rowData, setRowData] = useState<any>(null);
  const gridStateData = useSelector(gridData);
  const dispatch = useDispatch();
  
  // PUSH TABLE CHANGES VIA WEBSOCKET TO BACKEND 
  const handleCellChange = (event: any) => {
    
  }


  var init_data = {   
    id: 0,
    dis: "Mon 10/19 8:09 A",
    hour: "8 a"
  }

  const dataSetter = (params: { newValue: any; data: any; }) => {
    params.data.dis = params.newValue;
    return false;
  };
  
  const onGridReady = (params: GridReadyEvent) => {
    dispatch(updateGridData(init_data))
    setGridApi(params.api);
    setColumnApi(params.columnApi);
  };

  return (
    <div className="ag-theme-alpine demo-grid-wrap">
      <AgGridReact
        onGridReady={(params) => {
          onGridReady(params);
        }}
        immutableData={true}
        rowData={gridStateData}
        getRowNodeId={node => node.id}
        modules={AllModules}
        onCellValueChanged={handleCellChange}
        defaultColDef={{
          resizable: true,
          sortable: true,
          filter: true,
          headerComponentFramework: LoadHeaderComponent,
          headerComponentParams: {
            menuIcon: "fa-bars",
          },
        }}
      >

        <AgGridColumn headerName="#" width={50} checkboxSelection sortable={false} suppressMenu filter={false} pinned></AgGridColumn>

        <AgGridColumn headerName="Load Details" headerGroupComponentFramework={HeaderGroupComponent}>
          <AgGridColumn field="dis" width={110} headerName="Dispatch" editable  cellClass="dispatch" valueSetter={dataSetter} />
          <AgGridColumn field="hour" width={50} headerName="Hour" cellClass="hour" />
        </AgGridColumn>

      </AgGridReact>
    </div>
  );
};

const rules = {
  dc_rules:{
    "cell-blue": (params: { value: string }) => params.value === 'ERD',
    "cell-beige": (params: {value: string }) => params.value === 'PDC',
    "cell-cyan": (params: {value: string }) => params.value === 'CRD'
  },
  nr_cube_rules:{
    "cell-red": (params: {value: number }) => params.value > 10.0
  }
}

export default LoadSchedulerGrid;

javascript - TS with Redux Slices: valueService.js:205 Uncaught TypeError: Cannot assign to read only property 'dis' of object '#

问题描述

How to both execute Command and Button click in Xamarin

解决方案

推荐阅读