React状态问题：首次输入后新增条目为空而非提交的名称

核心原因 #

你的代码问题出在在状态更新的函数式回调中执行了DOM修改的副作用。React明确要求，状态更新的回调函数必须是纯函数——只能用来计算新的状态值，不能包含操作DOM、修改外部变量这类副作用。

当你在setMyNameArray(prevValue => { ... })的回调里执行myNameElement.current.value = ""时，这个清空操作会在React计算新状态的过程中触发。虽然第一次提交时能拿到输入值，但这种不恰当的副作用会干扰React的渲染流程：比如严格模式下React会双重执行该回调，导致输入框被意外提前清空；后续提交时，输入框的值可能已经被重置为空，最终加入列表的就是空字符串。

而你改用直接扩展myNameArray的写法后，清空操作是在事件处理函数的同步流程中执行的，不属于状态更新回调的副作用，因此能正常工作。不过这种直接使用当前状态的写法存在隐患：如果多次快速点击提交，可能会因为状态更新的异步性导致状态丢失，所以更推荐保留函数式更新，但将副作用移到回调外部。

修复后的代码（保留ref写法） #

import React, { useRef, useState } from "react";

function App() {
  const myNameElement = useRef();
  const [myNameArray, setMyNameArray] = useState([]);

  function handleAdd(event) {
    event.preventDefault();
    // 先获取输入值并去重空格，避免空提交
    const newName = myNameElement.current.value.trim();
    if (!newName) return;
    
    // 使用函数式更新确保拿到最新状态，避免状态丢失
    setMyNameArray(prevValue => [...prevValue, newName]);
    // 清空输入框放在状态更新之后的同步代码中
    myNameElement.current.value = "";
  }

  return (
    <div>
      <form onSubmit={handleAdd}>
        <input
          ref={myNameElement}
          type="text"
          placeholder="Enter your name..."
        />
        <button>Add</button>
      </form>
      <div>
        {myNameArray.map((myName, index) => (
          <h1 key={index}>{myName}</h1>
        ))}
      </div>
    </div>
  );
}

export default App;

更推荐的受控组件写法 #

React官方更推荐使用受控组件管理表单输入，完全避免直接操作DOM，符合单向数据流模型，更易维护和调试：

import React, { useState } from "react";

function App() {
  const [inputValue, setInputValue] = useState("");
  const [myNameArray, setMyNameArray] = useState([]);

  function handleAdd(event) {
    event.preventDefault();
    const trimmedValue = inputValue.trim();
    if (!trimmedValue) return;
    
    setMyNameArray(prev => [...prev, trimmedValue]);
    // 清空输入框直接更新状态即可
    setInputValue("");
  }

  return (
    <div>
      <form onSubmit={handleAdd}>
        <input
          type="text"
          placeholder="Enter your name..."
          value={inputValue}
          onChange={(e) => setInputValue(e.target.value)}
        />
        <button>Add</button>
      </form>
      <div>
        {myNameArray.map((myName, index) => (
          <h1 key={index}>{myName}</h1>
        ))}
      </div>
    </div>
  );
}

export default App;

关键总结 #

1. 状态更新的函数式回调必须是纯函数，禁止在其中执行DOM操作、网络请求等副作用。
2. 操作DOM的副作用应放在事件处理函数的同步流程中，或使用useEffect处理依赖状态变化的副作用。
3. 优先使用受控组件管理表单输入，这能避免绝大多数与DOM操作相关的异常问题。

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