我在目前專案中使用的Material UI切換開關遇到了問題。當元件載入時，如果我在控制台記錄值，初始值是正確的。但是，如果我點擊開關，從“是”切換到“否”，開關將正確地渲染顯示選擇了“否”，控制台記錄再次觸發，但值仍然顯示為“是”。如果我再次點擊開關，嘗試將其切換回“否”，切換開關只會重新渲染而不會翻轉，控制台記錄再次觸發，值現在更新為“否”。所以基本上是第一次點擊翻轉開關，第二次點擊翻轉值。我之前使用過相同的切換開關沒有問題，所以有人能告訴我需要修復什麼才能在單擊時翻轉開關和值嗎？
處理輸入變更：
const handleInputChange = e => { const { name, 值 } = e.target; setValues({ ...values, [name]: ( typeof value === 'string' ? (value).replace(/ (?= )/g, '').trimStart() : value ) // 如果值是字串，則移除前導空格和多個空格 }); }; 從表單中呼叫的開關：
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 ( {label1} { ); } 
你正在處理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 ( {label1} ); }