布尔值未通过 Next.js 仪表板中的按钮单击进行更新

Question

我正在创建一个仪表板，其中包含许多更新 mongoDB 数据库的“控制”按钮。我的大多数按钮都可以正常工作，但我在使用一个名为“待机”的简单切换按钮时遇到了麻烦，按下一次待机打开，再次按下待机关闭并且数据库更新。

这是按钮的 html，id 和当前待机状态被传递到standByButton 函数中。

<form action={standByButton}>
   <input type="hidden" name="id" value={staff.id} />
   <input type="hidden" name="isStandBy" value={staff.standBy} />
   <StandByButton type={"submit"}/>
</form>

这里是standByButton函数。我的问题来自于改变布尔值的状态。这里我期望每次按下按钮时它都会反转，但状态不会随着

const standBy = !isStandBy;

而改变。事实上，它在我的脚本的其他地方有效，但在这里不行。我已确认每次调用都会更新数据库，但

standBy

不会更改状态。

export const standByButton = async (formData) => {
    const { id, isStandBy } = Object.fromEntries(formData);
 
    const standBy = !isStandBy;


    try {
        connectToDB();

        const updateFields = {
            standBy
        }

        console.log(updateFields);

        await Daily.findByIdAndUpdate(id, updateFields);

    } catch (err) {
        console.log(err);
        throw new Error("Failed to update standby");
    }

    revalidatePath("/dashboard/board");
}

我目前尝试了两种方法来更改布尔值。我已经尝试过

const standBy = !isStandBy;

但没有成功。我还尝试在创建

updatedFields

后更改状态。

export const standByButton = async (formData) => {
    const { id, isStandBy } = Object.fromEntries(formData);
 
    const standBy = !isStandBy;

    try {
        connectToDB();
        const updateFields = {
            standBy
        }

        Object.keys(updateFields).forEach(
            (key) =>
               (parseInt(updateFields[key]) == true) ? (updateFields[key] = false) :
               (parseInt(updateFields[key]) == false) && (updateFields[key] = true)
        )

        console.log(updateFields);
        await Daily.findByIdAndUpdate(id, updateFields);

    } catch (err) {
        console.log(err);
        throw new Error("Failed to update standby");
    }

    revalidatePath("/dashboard/board");
}

这个方法也行不通。我已检查表单是否正确传递，并且数据库是否正确更新，因此错误必须与布尔状态更改有关，但我无法准确指出导致该错误的原因。我也尝试过使用

let standBy = !isStandBy;

更改变量的类型，但它仍然没有改变结果。

Answer 1

由于 React 会尝试不重新创建函数实例

standByButton

，因此

const

变量

standBy

是不可变的。代替使用：

let standBy = !isStandBy;

现在

standBy

可以随着

isStandBy

的变化而变化。