单击复选框时，带有复选框的 React/Redux 组件不会更新，即使我正在返回新的 state

Question

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!

Answer 1

First I would inspect if the checkbox works with useState to manage your state.

import { useState } from "react";

function CheckBoxForm() {
  const [checked, setChecked] = useState(false);

  return <Checkbox checked={checked} onChange={() => setChecked(!checked)} />;
}

Then I would check if you have wired up the reducer correctly using redux or useReducer. When you dispatch an action it should trigger a rerender. For troubleshooting this using redux please refer to the redux docs: https://react-redux.js.org/troubleshooting#my-views-aren-t-updating-when-something-changes-outside-of-redux .

You may be updating the object directly rather than dispatching an action using the function provided by the redux store. If you are using hooks, here is how you wire up your app to make sure the component props are subscribed to changing in the redux store. You must wrap with a provider, use redux hooks like useSelector and use their provided dispatch function: https://react-redux.js.org/api/hooks

Using useReducer is a much simpler process and will be easier to troubleshoot: https://beta.reactjs.org/reference/react/useReducer