jeudi 5 janvier 2023

React/Redux component with checkboxes does not update when click on checkbox even though I'm returning new state

I've been stuck for a while trying to make the re-render in the checkboxes to work, the variables are being updated but it's just the rendering that doesn't happen.

I'm receiving a response from the backend that contains an object with an array of steps, I'm going to render a checkbox for every step if it's from a specific type. As soon as I received the object, I add in every step a new property value to use it later for checking the checkboxes.

This is my reducer:

export const MyObject = (state: MyObject = defaultState, action: FetchMyObjectAction | UpdateStepsInMyObjectAction) => {
switch (action.type) {
    case "FETCH_MYOBJECT":
        return {
            ...action.payload, // MyObject
            steps: action.payload.steps.map((step) => {
                if (step.control.controlType === "1") { // "1" = checkbox
                    return {
                        ...step,
                        value: step.control.defaultValues[0] === "true" ? true : false, // Adding the property value
                    };
                }
                return step;
            }),
        };
    case "UPDATE_STEPS":
        return {
            ...state,
            steps: state.steps.map((step) => {
                if (step.id === action.payload.stepId) { // if this is the checkbox to update
                    return {
                        ...step,
                        value: action.payload.checked,
                    };
                }
                return step;
            }),
        };
    default:
        return state;
}

This is how I'm rendering the checkboxes:

 for (let step of steps) {
    if (step.control.controlType === "1") {
       controls.push(
            <Checkbox
                label={step.displayName}
                checked={step.value}
                onChange={(_ev, checked) => {
                    callback(step.id, checked);
                }}
                disabled={false}
                className={classNames.checkbox}
            />
        );
    }
}

callback is a function that calls the reducer above for the case "UPDATE_STEPS".

After inspecting the variables I can see that they are being updated properly, it's just that the re-render doesn't happen in the checkboxes, not even the first time I check the box, the check doesn't appear. If I move to a different component and then go back to the component with the checkboxes I can see now the checks. But if I check/uncheck within the same component, nothing happens visually.

As far as I know, I'm returning new objects for every update, so mutability is not happening. Can you see what I'm missing?

Thanks!




Aucun commentaire:

Enregistrer un commentaire