Question

我正在尝试在q = pd.DataFrame(data=[[28,50,30],[29,40,40],[30,30,30]],columns=['sprint','created','resolved'])中使用useState。我想访问和修改其中的状态（useEffect，这里命名为useEffect并根据新状态渲染组件。

isAuth

问题在控制台中，我得到import React, { useState, useEffect } from 'react'; const Authentication = () => { const [isAuth, setIsAuth] = useState(false); useEffect(() => { console.log(isAuth); setIsAuth(true); console.log(isAuth); }, [isAuth]); return <div>{isAuth ? <p>True</p> : <p>False</p>}</div>; }; export default Authentication;，false，false，true。我希望第二个控制台消息是正确的，而不是此控制台。有人可以解释一下它是如何发生的，以及我该如何在渲染组件之前实际更改状态？

Answer 1

setIsAuth不会导致局部变量isAuth更改其值。 const不能更改其值，即使您将其定义为let，设置状态也不会更改。相反，当您设置状态时，组件会重新渲染。在该新渲染上，对useState的调用将返回新值，您可以将该新值用于新渲染。

Answer 2

代码中有一些注释，解释了React setState将如何在组件重新渲染后才更新本地const

import React, { useState, useEffect } from 'react';

const Authentication = () => {
    // React will initialise `isAuth` as false
    const [isAuth, setIsAuth] = useState(false);

    useEffect(() => {
        // Console log outputs the initial value, `false`
        console.log(isAuth);
        // React sets state to true, but the new state is not available until
        // `useState` is called on the next render
        setIsAuth(true);

        // `isAuth` will remain false until the component re-renders
        // So console.log will output `false` again the first time this is called
        console.log(isAuth);
    }, [isAuth]);

    // The first time this is rendered it will output <p>False</p>

    // There will be a re-render after the `setState` call and it will
    // output <p>True</p> 
    return <div>{isAuth ? <p>True</p> : <p>False</p>}</div>;
};

export default Authentication;

Answer 3

实际上是正确的。 useEffect使您可以在更新后访问最新状态。因此，在第一次渲染期间，无论是否更新它，您看到的基本上都是初始状态。

在setState内调用useEffect会导致重新渲染为新状态（isAuth = true），这将导致再次调用useEffect。此时，新的记录状态为true。

在useEffect函数中使用useState函数

3 个答案: