javascript - 为什么使用 setState(...) 时 console.log 为空？

Question

为什么当我 console.log(data) 时它会记录数据，但当我尝试记录 set 状态设置的项目时它为空？我不明白是因为它在控制台日志记录之前没有时间更新吗？

  const [currentUser, setCurrentUser] = useState(null);
        const [pending, setpending] = useState(true);
        const [userData, setuserData] = useState({});

        useEffect(() => {
            Authentication.auth().onAuthStateChanged((user) => {
                setCurrentUser(user)
                setpending(false)
                localStorage.setItem('user', user.uid);
                console.log(localStorage.getItem('user'));
            });

            getData()

        }, []);

        const getData = () => {
            Authentication.firestore().collection('Health_data')
                .doc(localStorage.getItem('user'))
                .get()
                .then(doc => {
                    const data = doc.data();
                    localStorage.setItem('user_data', JSON.stringify(data));
                    setuserData(data)
                    console.log(data)
                }).catch(function (error) {
                    console.error("Error reading health", error);
                });
                console.log(userData)
        }

Answer 1

我假设您对 getData 末尾的 console.log(userData); 的输出感到困惑。它不显示更新的用户有两个原因，其中任何一个都足够了。 :-) 他们是:

1. console.log(userData) 发生在 setuserData 调用之前，因为 Promise 回调始终是异步的。

2. userData是一个常量，在Example函数调用中，它的值不会改变。当状态更改时，Example 将再次被调用，那个 new userData 常量将包含更新的用户在里面。 (请注意，无论是用 let 还是 const 声明，它实际上都是一个常量。)每个常量都存在于执行上下文中 这与对创建常量的Example 的特定调用相关。更多信息请参见 Dan Abramov 的文章 A Complete Guide to useEffect (这不仅仅是useEffect)。

这是一个演示:

const { useState } = React;

const delay = ms => new Promise(resolve => setTimeout(resolve, ms));

let executionContext = 0;
const Example = () => {
    const contextNumber = ++executionContext;
    const [value, setValue] = useState(0);

    const log = msg => console.log(`[${contextNumber}]: ${msg}`);

    log(`Example called, value = ${value}`);
    
    const onClick = () => {
        log(`onClick`);
        delay(800)
        .then(() => {
            const newValue = Math.floor(Math.random() * 10000);
            log(`calling setValue(${newValue})...`);
            setValue(newValue);
            log(`value is still ${value} (reason #2)`);
        });
        log(`value is still ${value} (reason #1)`);
    };
    
    return (
        <div>
            {value}
            <div>
                <input type="button" onClick={onClick} value="Click Me" />
            </div>
        </div>
    );
}


ReactDOM.render(<Example/>, document.getElementById("root"));

<div id="root"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.12.0/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.12.0/umd/react-dom.production.min.js"></script>