Javascript 从React中的API调用获取实际数据之前，从状态获取空值

我知道在从API调用获取数据之前，数据有一个初始状态，即“null”。但是，当调用API时，数据应该更新，而在记录实际数据之前，日志会向我显示2个空值

    const [error, setError] = useState(null);
    const [isLoaded, setIsLoaded] = useState(false);
    const [data, setData] = useState(null);

    const { user } = isAuthenticated();

    useEffect(() => {
        getUser(user.userId)
            .then()
            .then(
                (result) => {
                    setIsLoaded(true);
                    setData(result);
                },
                (error) => {
                    setIsLoaded(true);
                    setError(error);
                }
            )
    }, [])

    console.log(data)

为什么在实际数据之前获取这些空值？ 如何避免这些空值？ 如果我试图在第页显示该值，则这些初始空值将导致错误。

由于（调用

render

函数两次），您在控制台中的first渲染上获得两个日志

null

另外，您有两个未批处理的状态更改（

setIsLoaded

，

setData

），React不会批处理承诺中的状态更改

因此，在第一次渲染中有日志（

null

），在

setIsLoaded

中有另一个（

null

），最后是

setData

中的数据

---

由于您使用了

useffect

，因此将调用回调。

您可能正在严格模式下运行，这将使用空数据呈现元素两次。这不会发生在生产环境中，只会发生在开发环境中。不要在那里登录，在获取数据后登录结果回调。不，我不是在严格模式下运行@codemonkey还有空的

then（）

？看起来多余。通过这个，你将是你的编程大师，而不是使用严格模式！是的，您在完成时有另一个状态更改

setIsLoaded

，承诺中的状态更改未批处理。是的，您是对的，只需更改setData（）和setIsLoaded（）的顺序即可删除一个空值。但是仍然存在一个空值。如果它存在，则初始值为空值，如回答中所述***useEffect回调在第一次渲染后运行****您不应该调整任何内容，这就是它的工作原理，请阅读React文档中的条件渲染和ajax调用