點擊MUI切換開關時，無法更新顯示和值的問題

Question

我在目前專案中使用的Material UI切換開關遇到了問題。當元件載入時，如果我在控制台記錄值，初始值是正確的。但是，如果我點擊開關，從“是”切換到“否”，開關將正確地渲染顯示選擇了“否”，控制台記錄再次觸發，但值仍然顯示為“是”。如果我再次點擊開關，嘗試將其切換回“否”，切換開關只會重新渲染而不會翻轉，控制台記錄再次觸發，值現在更新為“否”。所以基本上是第一次點擊翻轉開關，第二次點擊翻轉值。我之前使用過相同的切換開關沒有問題，所以有人能告訴我需要修復什麼才能在單擊時翻轉開關和值嗎？

處理輸入變更：

const handleInputChange = e => {
        const { name, 值 } = e.target;
        setValues({
            ...values,
             [name]: ( typeof value === 'string' ? (value).replace(/ (?= )/g, '').trimStart() : value )
            // 如果值是字串，則移除前導空格和多個空格
        });
    };

從表單中呼叫的開關：

<ToggleSwitch
          onChange={handleInputChange}
          label1='否'
          label2='是'
          name='useForCalcs'
          value={values.useForCalcs}
       />

ToggleSwitch組件：

import * as React from 'react';
import {Box, Switch, Typography} from '@material-ui/core';

export default function ToggleSwitch(props) {
  const { label1, label2, name, onChange, value} = props;
  const [checked, setChecked] = React.useState(false);
  const convertToEventParams = (name, value) => ({ target: { name, 值 } });
  const curValue = value === 1 ? true : false;
  const handleSwitch = e => { setChecked(e.target.checked); };

  React.useEffect(() => { setChecked(curValue); }, [curValue]); // 每次checked值改變時重新渲染切換開關

  const handleChecked = e => {
    handleSwitch(e);
    onChange(convertToEventParams(name, (checked === false ? 1 : 0))); // 將True/False轉換為1/0值
  };

  return (
    <Box>
      <Typography>
        {label1}
        {<Switch
          name={name}
          checked={checked}
          value={checked}
          onChange={handleChecked}
          inputProps={{'aria-label': 'switch'}}
        />}
        {label2}
      </Typography>
    </Box>
  );
}

Answer 1

你正在處理ToggleSwitch元件中的狀態和選取值。你既有本地狀態（checked），又有一個prop（value），你想要將它們同步。

要解決這個問題，確保開關和值正確同步

你正在從父元件傳遞value prop，你可以直接使用該prop來決定開關的狀態。 你可以透過刪除不必要的狀態和效果來簡化組件程式碼。

你可以直接使用value prop來決定開關的初始狀態，並使用onChange函數更新父元件。

import React from 'react';
import { Box, Switch, Typography } from '@material-ui/core';

export default function ToggleSwitch(props) {
  const { label1, label2, name, onChange, value } = props;

  const handleChecked = () => {
    const newValue = value === 0 ? 1 : 0; // 切换值
    onChange({ target: { name, value: newValue } });
  };

  return (
    <Box>
      <Typography>
        {label1}
        <Switch
          name={name}
          checked={value === 1}
          onChange={handleChecked}
          inputProps={{ 'aria-label': 'switch' }}
        />
        {label2}
      </Typography>
    </Box>
  );
}