React+MUI表单答案页大小写切换功能失效求助

你的代码存在三个关键问题，导致状态切换后文本未重新渲染：

1. LocalStorage 读取值为字符串而非布尔值 #

localStorage.getItem("upperCase") 返回的是 "true"/"false" 字符串，而非布尔值。后续用 upperCase === true 判断时，字符串与布尔值永远不匹配，大小写转换逻辑从未正确触发。

修复后的 SettingsContext 代码：

import { useState, useEffect, createContext } from 'react';

export const SettingsContext = createContext();

export const SettingsProvider = props => {
  // 将LocalStorage字符串转为布尔值
  const [upperCase, setUpperCase] = useState(localStorage.getItem("upperCase") === "true");

  // 监听状态变化，同步更新DOM属性和LocalStorage
  useEffect(() => {
    document.documentElement.setAttribute("upperCase", upperCase);
    localStorage.setItem("upperCase", upperCase);
  }, [upperCase]);

  return (
    <SettingsContext.Provider value={[upperCase, setUpperCase]}>
      {props.children}
    </SettingsContext.Provider>
  )
}

2. SettingsProvider 未监听状态变化更新DOM #

原代码直接在组件顶层设置DOM属性，仅初始化时执行一次，状态变化后不会同步更新。改用 useEffect 监听 upperCase 状态，确保状态变化时自动同步DOM和LocalStorage。

3. TextField 使用 defaultValue 而非 value #

MUI TextField 的 defaultValue 仅在首次渲染时赋值，后续状态变化不会更新输入框内容。由于输入框是只读的，需用 value 绑定动态值，实现状态驱动的视图更新。

修复后的 AnswerPage TextField 代码片段：

<FormTextField
  onClick={copyCountry}
  InputProps={{
    readOnly: true,
    endAdornment: (
      <InputAdornment position="end">
        <IconButton
          edge="end"
          color="primary"
          sx={{ boxShadow: "none" }}
          onClick={copyCountry}
        >
          <ContentCopyIcon sx={{ height: ".8em", width: ".8em" }} />
        </IconButton>
      </InputAdornment>
    ),
  }}
  variant="standard"
  label="Country"
  type="text"
  // 替换defaultValue为value，绑定动态计算的格式化值
  value={country ? countryFormated : ""}
  inputRef={countryRef}
/>

4. 简化 Switch 组件的冗余操作 #

原Switch组件中手动更新LocalStorage和DOM的逻辑，已移至SettingsProvider的useEffect中，可简化handleChange：

修复后的 AnswersSettingsModal 代码片段：

const handleChange = (event) => {
  setUpperCase(event.target.checked);
  // 移除此处的localStorage和DOM设置，交由统一逻辑处理
};

完成上述修改后，切换Switch时状态会同步更新，触发视图重新计算并渲染大小写转换后的文本。

内容的提问来源于stack exchange，提问作者Glenn Larsen