React状态更新后field输出未达预期的原因咨询

嗨，我来帮你拆解这个问题的核心原因，其实这和React状态更新的异步特性以及组件初始化时的状态取值逻辑密切相关：

1. 初始状态的初始化逻辑 #

当组件第一次挂载渲染时，const [field,setField]=useState(initField())这行代码会执行一次——useState的初始值计算只会在组件首次挂载时运行，此时word的初始值是空字符串，所以第一次调用initField()返回的结果就是' - FIELD'，控制台也会打印出"CALLED"。

2. useEffect里的状态更新陷阱 #

你的useEffect是在组件挂载完成后执行的，里面先调用了setWord("WORD")，紧接着就调用setField(initField())。这里的关键是：React的setState是异步批量更新的——调用setWord后，word的状态并不会立刻同步更新为"WORD"，因为此时组件还没有触发重新渲染，当前作用域里的word依然是初始的空字符串。所以这时候调用initField()，用到的还是旧的word值，最终setField设置的依然是' - FIELD'，页面自然就显示这个结果了。

解决方法 #

想要让field正确显示"WORD - FIELD"，有两种常用的可行方案：

方案一：监听word的变化更新field

新增一个依赖word的useEffect，当word状态更新后再同步更新field：

function App() {
  const [word,setWord]=useState('');
  const [field,setField]=useState(initField())

  function initField(){
    console.log("CALLED")
    return word+ ' - '+ "FIELD"
  }

  useEffect(()=>{
    setWord("WORD");
  },[])

  // 当word变化时触发，此时word已经是更新后的值
  useEffect(()=>{
    setField(initField());
  },[word])

  return (
    <div className="App">
      <h1>{field}</h1>
    </div>
  );
}

方案二：直接传递最新值，避免依赖状态

如果不想多写一个useEffect，可以直接把要设置的word值存成变量，直接传递给setField，这样就不用依赖状态的异步更新了：

function App() {
  const [word,setWord]=useState('');
  const [field,setField]=useState(initField())

  function initField(){
    console.log("CALLED")
    return word+ ' - '+ "FIELD"
  }

  useEffect(()=>{
    const newWord = "WORD";
    setWord(newWord);
    // 直接用变量的值，而不是依赖状态
    setField(`${newWord} - FIELD`);
  },[])

  return (
    <div className="App">
      <h1>{field}</h1>
    </div>
  );
}

补充说明 #

React设计异步批量更新的初衷是为了性能优化——把多个状态更新合并成一次渲染，避免频繁触发组件重绘。所以在同一个回调（比如useEffect、点击事件）里，多次调用setState后，状态不会立刻更新，必须等回调执行完毕，React才会统一处理状态更新并触发重新渲染。

备注：内容来源于stack exchange，提问作者rlight430