React useState Hook setter 对数组变量没有结果

Question

我正在尝试使用带有 React 16.7.0-alpha.2 的 useState hook 将 udemy 课程中看到的示例从基于类的有状态组件改编为基于函数的组件

虽然原始数据类型的 setter 函数工作正常（例如 setUsername），但为数组变量调用 setter 没有效果/结果。至少它不会将状态变量重置回空数组。

另一方面，通过使用 concat 方法从 state 设置数组的新副本按预期工作。

我还是 React 钩子的新手，想知道我错过了什么？

import React, {useState} from 'react';
import { Grid, Form, Segment, Button, Header, Message, Icon } from 'semantic-ui-react';
import { Link } from 'react-router-dom';

import { registerUser } from './authFunctions';
import { isRegisterFormEmpty } from './validatorFunctions';

const Register = () => {

  //defining state properties and setters:
  const [username, setUsername] = useState('');
  const [email, setEmail] = useState('');  
  const [password, setPassword] = useState('');
  const [passwordConfirmation, setPasswordConfirmation] = useState('');
  const [registerErrors, setRegisterErrors] = useState([]);  

  //defining handlers:
  const onUsernameChange = e =>             setUsername(e.target.value);
  const onEmailChange = e =>                setEmail(e.target.value);  
  const onPasswordChange = e =>             setPassword(e.target.value);
  const onPasswordConfirmationChange = e => setPasswordConfirmation(e.target.value);

  const onFormSubmit = e => {
    e.preventDefault(); //prevent a page reload

    //set registerErrors to empty array in case that the user clicks on submit again
    setRegisterErrors([]); // DOES NOT WORK

    setUsername('JDoe'); //works as expected

    if( isRegisterFormEmpty(username, email, password, passwordConfirmation) ) {
      let error = {message: 'Please fill in all fields'};
      setRegisterErrors( registerErrors.concat(error) ); //THIS WORKS FINE, THOUGH...
    } else {
      //registerUser(username, email, password, passwordConfirmation);
    }//if

  }//onFormSubmit

  const showErrors = () => registerErrors.map( (error, idx) => <p key={idx}>{error.message}</p> );

  return (
    <Grid textAlign='center' verticalAlign='middle' className='app'>
      <Grid.Column style={{ maxWidth: 450 }}>
        <Header as='h2' icon color='teal' textAlign='center'>
          <Icon name='puzzle piece' color='teal' />
          Register to DevChat
        </Header>
        <Form size='large' onSubmit={onFormSubmit}>
          <Segment stacked>
            <Form.Input 
              fluid
              type='text'              
              icon='user'
              iconPosition='left'
              placeholder='Username'
              onChange={onUsernameChange}
              value={username}
            />
            <Form.Input 
              fluid
              type='email'              
              icon='mail'
              iconPosition='left'
              placeholder='Email'
              onChange={onEmailChange}
              value={email}
            />
            <Form.Input 
              fluid
              type='password'              
              icon='lock'
              iconPosition='left'
              placeholder='Password'
              onChange={onPasswordChange}
              value={password}
            />
            <Form.Input 
              fluid
              type='password'              
              icon='lock'
              iconPosition='left'
              placeholder='Password Confirmation'
              onChange={onPasswordConfirmationChange}
              value={passwordConfirmation}
            />  
            <Button
              color='teal'
              fluid
              size='large'
              content='Submit'
            />          
          </Segment>
        </Form>
        {
          registerErrors.length > 0 && 
            <Message error>
              <h3>Please note</h3>
              {showErrors()}
            </Message>
        }
        <Message>
            Already a user? <Link to='/login'>Login</Link>
        </Message>
      </Grid.Column>
    </Grid>
  )
}

export default Register;

Answer 1

这是常见的useState陷阱。

setRegisterErrors([])有效，它不可能不工作，因为它被调用了。它触发同步组件更新。因为onFormSubmit在那之后不会退出，setRegisterErrors(registerErrors.concat(error))所以在那之后被调用，其中registerErrors是在外部定义的先前状态onFormSubmit。

onFormSubmit导致 2 个寄存器状态更新，其中第二个更新（连接的原始数组）覆盖第一个更新（空数组）。

setState解决此问题的方法与使用状态更新器函数相同，该函数提供要更新的当前状态：

setRegisterErrors(registerErrors => [...registerErrors, error]);

或者，可以合并寄存器状态更新：

e.preventDefault();

const registerErrors = [];

setUsername('JDoe');

if( isRegisterFormEmpty(username, email, password, passwordConfirmation) ) {
  registerErrors.push({message: 'Please fill in all fields'});
} else {
  ...
}

setRegisterErrors(registerErrors);