javascript 点击复选框时,即使返回新状态,带有复选框的React/Redux组件也不会更新

wfveoks0  于 2023-01-08  发布在  Java
关注(0)|答案(1)|浏览(130)

我已经卡住了一段时间,试图使复选框中的重新渲染工作,变量正在更新,但它只是渲染没有发生。
我从后端接收到一个响应,其中包含一个包含步骤数组的对象,如果它来自特定类型,我将为每个步骤呈现一个复选框。一旦我接收到该对象,我将在每个步骤中添加一个新属性value,以便稍后使用它来选中复选框。
这是我的减速器

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;
}

下面是我如何呈现复选框:

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是为“UPDATE_STEPS”情况调用上述简化器的函数。
在检查变量之后,我可以看到它们被正确地更新了,只是复选框中没有发生重新呈现,甚至在我第一次选中复选框时,复选框也没有出现。如果我移动到一个不同的组件,然后返回到带有复选框的组件,我现在可以看到复选框。但是如果我在同一个组件中选中/取消选中,视觉上什么也不会发生。
据我所知,每次更新都返回新对象,所以不会发生易变性。你能看出我遗漏了什么吗?
谢谢!

v09wglhw

v09wglhw1#

首先,我将检查复选框是否与useState一起工作来管理您的状态。

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.
你可以直接更新对象,而不是使用redux商店提供的函数来调度操作。如果你使用钩子,下面是你如何连接你的应用,以确保组件属性订阅redux商店中的更改。你必须使用提供程序 Package ,使用像useSelector这样的redux钩子,并使用它们提供的调度函数:https://react-redux.js.org/api/hooks
使用useReducer是一个简单得多的过程,也更容易进行故障排除:https://beta.reactjs.org/reference/react/useReducer

相关问题