React - 关于复选框和 axios，我做错了什么？

Question

看来我对checkboxes/toggle有很大的误解。我想要做的是，将 checkbox/toggle 的状态从 true 更改为 false 或其他。

axios 请求工作正常。我可以更改任何文本并强制执行。但是每当涉及到切换一个值时，我都会失败。它总是以：我可以将值从 false 设置为 true。但从不从真到假。

我的状态显示正确的值，所以当我单击切换按钮时，它在控制台中显示：true、false、true、false...

但是当我尝试将它发送到服务器并打印时 console.log(req.body.isClosed);在我的后端，只有在从 false 到 true 的情况下，它才会打印“true”。从 false 到 true 是一个“undefined”

所以你在这里，我从 5 小时开始就尝试修复它。使用纯复选框，react-multi-switch-toggle 和现在的 mui switch ... 希望有人能帮助我

更新：当我更改 isClosed: isClosed 时？ isClosed : settings.isClosed 到已关闭：已关闭？错误：settings.isClosed

它有效，但前提是我的切换为真。如果我的按钮状态为 false，它仍会打印 undefined。所以目前它只能在我的切换状态为真时发送有效的东西。不管我发送什么然后一切正常

import React, { useState, useEffect } from 'react';
import axios from 'axios';
import { useSelector, useDispatch } from 'react-redux';

import { systemSettings } from '../../../../../redux/actions/systemSettingsAction';
import Switch from '@mui/material/Switch';

const IsClosed = () => {
  const dispatch = useDispatch();
  useEffect(() => {
    dispatch(systemSettings());
  }, []);

  const settingsstate = useSelector((state) => state.systemSettingsReducer);
  const { settings } = settingsstate;

  const [isClosed, setIsClosed] = useState(
    settings[0]?.isClosed === true ? true : false
  );

  console.log(isClosed);
  const handleIsClosed = (event) => {
    setIsClosed(event.target.checked);
  };

  const updateInfor = () => {
    try {
      axios.patch(
        '/api/settings',
        {
          id: settings[0]?._id,
          isClosed: isClosed ? isClosed : settings.isClosed,
        }
      );
      window.location.reload(true);
    } catch (err) {}
  };

  return (
    <div>
      <Switch
        checked={isClosed}
        onChange={handleIsClosed}
        inputProps={{ 'aria-label': 'controlled' }}
      />
      <button
        onClick={updateInfor}
        className='block w-full bg-yellow-400 hover:bg-yellow-300 p-4 mt-2 rounded text-black hover:text-yellow-800 transition duration-300'
      >
        Confirm
      </button>
    </div>
  );
};

export default IsClosed;

Answer 1

我认为问题出在这里：

const handleIsClosed = (event) => {
    setIsClosed(event.target.checked);
  };

你是将开关的当前状态设置为你的isClosed状态，实际逻辑应该是相反的

所以 onChange 你应该切换你的当前状态，你可以这样做：

const handleIsClosed = () => {
    setIsClosed(!isClosed);
  };

这将采用您当前的 isClosed 状态，并切换它（因此，如果它是 true，它将是 false，反之亦然）

React - 关于复选框和 axios，我做错了什么？

React - What am i doing wrong about checkbox and axios?

checkbox

state

mongodb

reactjs

material-ui