React Material UI TextField defaultValue不更新及批量赋值问题求助

我看了你的代码，问题主要出在两个核心点上：误用非受控的defaultValue而非受控的value，以及状态更新时没有正确创建新数组导致React无法检测到变化。下面是修复后的完整代码，我会逐一解释修改细节：

import { useState } from "react";
import TextField from "@mui/material/TextField";
import Button from "@mui/material/Button";

export default function App() {
  // 初始化状态数组
  const [valueList, setValueList] = useState(Array(3).fill(""));

  // 处理输入框内容变化
  const handleInputChange = (index, event) => {
    // 关键：创建原数组的副本，避免直接修改原状态数组
    const newValueList = [...valueList];
    newValueList[index] = event.target.value;
    setValueList(newValueList);
  };

  // 处理批量更新所有输入框
  const handleUpdateAll = (index) => {
    // 用当前输入框的值填充新数组
    const newValueList = Array(3).fill(valueList[index]);
    setValueList(newValueList);
  };

  return (
    <div style={{ padding: "20px" }}>
      {valueList.map((item, index) => (
        <div key={index} style={{ marginBottom: "10px", display: "flex", gap: "10px" }}>
          {/* 把defaultValue改成value，让输入框变成受控组件 */}
          <TextField
            id={`standard-basic-${index}`}
            label="Label"
            value={valueList[index]}
            onChange={(e) => handleInputChange(index, e)}
            variant="standard"
          />
          <Button
            variant="contained"
            color="primary"
            onClick={() => handleUpdateAll(index)}
          >
            Update All
          </Button>
        </div>
      ))}
    </div>
  );
}

核心修改点说明： #

• 替换defaultValue为value
defaultValue仅在组件初始化时生效，属于非受控组件属性，后续状态变化不会同步到输入框显示。改用value={valueList[index]}后，输入框变为受控组件，会完全跟随valueList的状态更新而实时变化。

• 正确更新状态数组
  你原来的代码中let newValueList = valueList;是直接引用原数组，修改它并不会创建新的数组引用，React依赖状态的引用变化来触发重渲染。现在用const newValueList = [...valueList];创建原数组的浅拷贝，修改后再传给setValueList，React就能准确检测到状态变化并更新UI了。

• 拆分处理函数（可选但推荐）
  把onChange和onClick的逻辑抽成单独的函数，既让代码结构更清晰易维护，也避免了在map回调里写过多嵌套代码。

修改完成后，输入框会实时同步状态变化，点击"Update All"按钮也能把对应输入框的值同步到所有输入框中了。

内容的提问来源于stack exchange，提问作者Tam Do