React中useState赋值后输入框值无法修改的问题

你遇到的问题核心是输入框的绑定状态与更新状态不匹配，再加上初始状态类型定义错误，导致输入值无法同步更新：

1. 状态类型不匹配：你把infoMetrics初始化为数组[]，但API返回的data.info是包含summary_interpretation字段的对象，类型不匹配会导致后续属性访问异常。
2. 输入框的value绑定的是infoMetrics.summary_interpretation，但onChange事件却调用setSummary更新另一个独立状态，导致输入框的显示值始终和infoMetrics绑定，用户输入的内容无法同步到这个状态，自然无法修改。

修复步骤 #

第一步：修正状态初始类型 #

把infoMetrics的初始状态从数组改为对象：

const [infoMetrics, setInfoMetrics] = useState({});

第二步：选择以下两种方案之一修复输入框 #

方案1：使用独立的summary状态（逻辑更清晰）

单独维护输入框对应的状态，在获取API数据后同步初始化：

const [infoMetrics, setInfoMetrics] = useState({});
const [summary, setSummary] = useState('');

useEffect(() => {
  const fetchMetricsInfo = async () => {
    try {
      const { data } = await axios.get(
        `API ADDRESS`,
        { headers: { Authorization: `Bearer ${token}` } }
      );
      setInfoMetrics(data.info);
      // 将API返回的初始值同步到summary状态
      setSummary(data.info.summary_interpretation);
    } catch (error) {
      console.error(error.message);
    }
  };

  fetchMetricsInfo();
}, []);

对应的输入框代码：

<div className="form-row">
  <div className="col-md-12 mb-3">
    <div className="titrExplain">Title</div>
    <input
      value={summary}
      type="text"
      className="form-control"
      name="summary"
      placeholder="Summary"
      required
      onChange={(e) => setSummary(e.target.value)}
    />
  </div>
</div>

方案2：直接更新infoMetrics对象中的字段

如果需要直接维护infoMetrics对象，在onChange时通过展开运算符更新指定字段：

<div className="form-row">
  <div className="col-md-12 mb-3">
    <div className="titrExplain">Title</div>
    <input
      {/* 加默认值避免初始状态为空时出现undefined */}
      value={infoMetrics.summary_interpretation || ''}
      type="text"
      className="form-control"
      name="summary"
      placeholder="Summary"
      required
      onChange={(e) => {
        // 基于之前的状态更新，确保其他字段不丢失
        setInfoMetrics(prevState => ({
          ...prevState,
          summary_interpretation: e.target.value
        }));
      }}
    />
  </div>
</div>

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