重定向后未存储 useState 值

Question

过去 2 天我遇到了一些问题，我不确定自己做错了什么。
我想实现一个登录页面，在登录后将用户重定向到仪表板。
因为我想在整个应用程序中使用 用户名 ，所以我将该值存储在 App.js.
中该值被传递给 Login.js，在那里我尝试调用 setUsername 函数来更新该值，但是在重定向之后该值再次为 null。 username的值不应该是用setUsername设置的值吗？？

App.js

const App = () => {
    const [username, setUsername] = useState(null);

    return (
        <div className="site">
            <main>
                <Switch>
                    <Route exact path={'/login'} render={() => <Login username={username} setUsername={setUsername} />} />
                    <Route exact path={'/dashboard/:username'} render={() => <Dashboard username={username} />}/>
                </Switch>
            </main>
        </div>
    );
};

Login.js

const Login = (props) => {
    let username = props.username;
    const [password, setPassword] = useState("");

    function handleSubmit(e) {
        e.preventDefault();
        axiosInstance.post('url', {
            username: username,
            password: password
        }).then(response => {
                props.setUsername(username);
             }
        ).then(() => window.location = `/dashboard/${username}`)
            .catch(error => {
             throw error;
        });
    }

    return (
        <MyForm onSubmit={handleSubmit}>
            <Form.Group controlId="formBasicUser">
                <Form.Label>Username</Form.Label>
                <Form.Control type="text" name="username" value={username} placeholder="Enter username" onChange={(e) => props.setUsername(e.target.value)}/>
            </Form.Group>

            <Form.Group controlId="formBasicPassword">
                <Form.Label>Password</Form.Label>
                <Form.Control type="password" name="password" value={password} placeholder="Password" onChange={e => setPassword(e.target.value)}/>
            </Form.Group>
            <Button variant="primary" type="submit">
                Login
            </Button>
        </MyForm>
    );
};

我也试过在提交功能中设置用户名，但是... nada

Dashboard.js

const Dashboard = (props) => {
    return (
        <h1>Welcome {props.username}</h1>
    );
};

Answer 1

状态是组件的职责。如果您想从 child 更新 parent 的状态，您可以传递一个函数（在 parent 中定义），该函数将依次更新状态。你不能像这样传递你的 setState。

如果你还想保持简短，我会推荐这个：

<Login username={username} setUsername={(val)=> { setUsername(val)}} />}

Answer 2

我认为重定向后用户名为空，因为您使用 window 位置，请尝试使用历史挂钩

const Login = (props) => {
let username = props.username;
let history = useHistory();
const [password, setPassword] = useState("");

function handleSubmit(e) {
    e.preventDefault();
    axiosInstance.post('url', {
        username: username,
        password: password
    }).then(response => {
            props.setUsername(username);
        }
    ).then(() => history.push(`/dashboard/${username}`))
        .catch(error => {
            throw error;
        });
}

return (
    <MyForm onSubmit={handleSubmit}>
        <Form.Group controlId="formBasicUser">
            <Form.Label>Username</Form.Label>
            <Form.Control type="text" name="username" value={username} placeholder="Enter username" onChange={(e) => props.setUsername(e.target.value)}/>
        </Form.Group>

        <Form.Group controlId="formBasicPassword">
            <Form.Label>Password</Form.Label>
            <Form.Control type="password" name="password" value={password} placeholder="Password" onChange={e => setPassword(e.target.value)}/>
        </Form.Group>
        <Button variant="primary" type="submit">
            Login
        </Button>
    </MyForm>
);};

重定向后未存储 useState 值

useState value not stored after redirection

javascript

state

reactjs

use-state