我想我拼错了道具，但我不确定

Question

所以基本上，我尝试在我的项目中实现 React Hooks，但它给了我这个错误。 也许我是盲人，看不到问题，我想我拼错了什么。 但也许我传递了错误的道具，我现在有点困惑。

这是我的标志是组件：

const SignIn = ({ emailSignInStart, googleSignInStart }) => {
const [userCredentials, setCredentials] = useState({
email: '',
passowrd: ''
});
const { email, password } = userCredentials;
const handleSubmit = async e => {
e.preventDefault();
emailSignInStart(email, password);
};
const handleChange = e => {
const { value, name } = e.target;
setCredentials({ ...userCredentials, [name]: value });
};
return (
<div className='sign-in'>
<h2>I already have an account</h2>
<span>Sign in with your email and passowrd</span>
<form onSubmit={handleSubmit}>
<FormInput
name='email'
type='email'
value={email}
required
handleChange={handleChange}
label='email'
/>
<FormInput
name='password'
type='password'
value={password}
required
handleChange={handleChange}
label='password'
/>
<div className='buttons'>
<CustomButton type='submit'>Sign in</CustomButton>
<CustomButton
type='button'
onClick={googleSignInStart}
isGoogleSignIn
>
Sign in with Google
</CustomButton>
</div>
</form>
</div>
);
};
const mapDispatchToProps = dispatch => ({
googleSignInStart: () => dispatch(googleSignInStart()),
emailSignInStart: (email, passowrd) =>
dispatch(emailSignInStart({ email, passowrd }))
});
export default connect(null, mapDispatchToProps)(SignIn);

这是我的表单输入组件：

const FormInput = ({ handleChange, label, ...props }) => (
<div className='group'>
<input className='form-input' onChange={handleChange} {...props}></input>
{label ? (
<label
className={`${props.value.length ? 'shrink' : ''} form-input-label`}
>
{label}
</label>
) : null}
</div>
);
export default FormInput;

有人可以帮我解决这个问题吗？

Answer 1

在线：

const [userCredentials, setCredentials] = useState({ email: '', passowrd: '' }); 

passowrd应该是password.否则，userCredentials.password将返回undefined.