React中useEffect打印变量为undefined问题求助

你的问题出在useEffect的回调函数上——你给它加了一个message参数，这个参数会遮蔽外部的state变量message。而useEffect的回调本身不会接收任何参数，所以这个参数的值始终是undefined，控制台打印的自然就是它。

修正方法： #

去掉useEffect回调里的message参数，直接使用外部的state变量即可：

import './App.css';
import React,{useState,useEffect} from 'react';

function App() {
    let [message,setMessage] = useState("");
    
    // 移除回调函数的message参数
    useEffect(() => {
        console.log(message);
    },[message])
    
    return(
        <div> 
            <input type="text" onChange={e => setMessage(e.target.value)}  />
        </div>
    )
}
export default App;

现在重新运行代码，输入框输入内容时，useEffect会随着message的更新触发，控制台就能正确打印当前输入的内容了。

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