Question

我正在尝试制作一个“更改密码”页面作为反应。问题是，每当我尝试在用户输入时保存该值时，都会在以后更新。当我控制台日志时，它只显示前一个字符。例如，当我输入 a 时，它会记录 <empty String>。在我输入“ab”后，它会记录一个。因此，当我将 newPassword 与 confirmPassword 进行比较时，它比较的是 newPassword === undefined。我该如何解决这个问题？

import React, { useEffect, useState } from 'react';
import { Link } from 'react-router-dom';
import TextField from '@material-ui/core/TextField';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';

const useStyles = makeStyles(theme => ({
    root: {
        '& .MuiTextField-root': {
            margin: theme.spacing(1),
            width: '30ch',
            justifyContent: 'center',
        },
    },
}));

const ChangePassword = props => {
    const classes = useStyles();

    const [newError, setNewError] = useState(true);
    const [confirmError, setConfirmError] = useState(true);
    const [newErrorMessage, setNewErrorMessage] = useState('');
    const [confirmErrorMessage, setConfirmErrorMessage] = useState('');
    const [newPassword, setNewPassword] = useState('');
    const [confirmPassword, setConfirmPassword] = useState('');

    const handleNewChange = async e => {
        setNewPassword(e.target.value);
        console.log('newpass: ', newPassword);

        const reg = {
            digit: /[0-9]/,
        };
        if (e.target.value.length < 6) {
            setNewError(true);
            setNewErrorMessage('Password must be longer than 6 characters');
            return;
        } else {
            if (!reg.digit.test(e.target.value)) {
                setNewError(true);
                setNewErrorMessage('Password must contain a digit');
                return;
            } else {
                setNewError(false);
            }
        }
    };

    const handleConfirmChange = e => {
        setConfirmPassword(e.target.value);
        console.log(confirmPassword);
        if (!newPassword === e.target.value) {
            setConfirmError(true);
            setConfirmErrorMessage('The passwords do not match');
        } else {
            setConfirmError(false);
            setConfirmErrorMessage('');
        }
    };

    return (
        <div>
            <div class="row">
                <div class="col-10">
                    <div class="container">
                        <h3 className="title">Change Password</h3>
                        <form className={classes.root}>
                            <div>
                                <TextField
                                    error={currError}
                                    helperText={currError && 'Password is incorrect'}
                                    id="currentPassword"
                                    label="Enter Current Password"
                                    variant="outlined"
                                    onChange={handleCurrChange}
                                />
                            </div>
                            <div>
                                <TextField
                                    error={newError}
                                    helperText={newError && newErrorMessage}
                                    id="newPassword"
                                    label="Enter new password"
                                    variant="outlined"
                                    onChange={handleNewChange}
                                />
                            </div>
                            <div>{newPassword}</div>
                            <div>
                                <TextField
                                    error={confirmError}
                                    helperText={confirmError && confirmErrorMessage}
                                    onChange={handleConfirmChange}
                                    id="confirmPassword"
                                    label="Confirm new password"
                                    variant="outlined"
                                />
                            </div>
                            <div>{confirmPassword}</div>
                        </form>
                    </div>
                </div>
            </div>
        </div>
    );
};

export default ChangePassword;

Answer 1

要在渲染后执行副作用，请在组件主体中使用 useEffect() 声明它。

useEffect(() => {
    console.log(password)
}, [password])

React setState(e.target.value) 不更新状态

1 个答案: