[英]React useState Hook setter has no result with array variable
I'm trying to adapt an example seen on an udemy course from a class-based stateful component to a function based component using the useState hook with React 16.7.0-alpha.2 我正在尝试使用带有React 16.7.0-alpha.2的useState钩子,将基于类的有状态组件的udemy课程中的示例调整为基于函数的组件。
While setter functions for primitive datatypes work fine (for example setUsername), calling a setter for an array variable has no effect/result. 虽然原始数据类型的setter函数工作正常(例如setUsername),但为数组变量调用setter没有效果/结果。 At least it doesn't reset the state variable back to an empty array.
至少它不会将状态变量重置回空数组。
On the other hand, setting a new copy of the array from state by using the concat method works as expected. 另一方面,使用concat方法从状态设置数组的新副本按预期工作。
I'm still new to React hooks and wonder what I've missed? 我还是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;
This is common useState
pitfall. 这是常见的使用
useState
陷阱。
setRegisterErrors([])
works, there's no chance for it to not work because it's called. setRegisterErrors([])
有效,没有机会因为它被调用而无法工作。 It triggers synchronous component update. 它会触发同步组件更新。 Since
onFormSubmit
doesn't exit after that, setRegisterErrors(registerErrors.concat(error))
is called after that, where registerErrors
is previous state that was defined outside onFormSubmit
. 由于之后
onFormSubmit
没有退出,之后setRegisterErrors(registerErrors.concat(error))
,其中registerErrors
是在onFormSubmit
外部定义的先前状态。
onFormSubmit
results in 2 register state updates, where second update (concatenated original array) overrides first update (empty array). onFormSubmit
导致2个寄存器状态更新,其中第二个更新(连接的原始数组)覆盖第一个更新(空数组)。
A way to fix this is same as with setState
, to use state updater function that provides current state to be updated: 修复此问题的方法与使用
setState
相同,以使用提供当前状态更新的状态更新程序功能:
setRegisterErrors(registerErrors => [...registerErrors, error]);
Alternatively, register state updates can be merged: 或者,可以合并寄存器状态更新:
e.preventDefault();
const registerErrors = [];
setUsername('JDoe');
if( isRegisterFormEmpty(username, email, password, passwordConfirmation) ) {
registerErrors.push({message: 'Please fill in all fields'});
} else {
...
}
setRegisterErrors(registerErrors);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.