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

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。