Javascript React表单提交正在触发重新呈现（尽管e.preventDefault）

我只是重新构造了我的授权表单组件，将状态处理逻辑拉入一个定制钩子中，以便它可以在其他地方重用。在此之前，提交表单不会触发重新呈现（例如，如果存在验证错误），但现在会触发。为了澄清，页面实际上并没有重新加载/刷新（因此我认为这不是来自默认的表单提交行为），但是背景图像（来自更高级别的容器组件）会重新呈现

AuthForm.js

const AuthForm = ({ buttonText, formType, onAuth, history, ...props }) => {

  const submitData = () => {
    onAuth(formType, values, history);
  }

  const {
    values,
    errors,
    handleChange,
    handleSubmit,
  } = useForm(submitData, validate);

return (
    <Form onSubmit={handleSubmit}>
      <FlexContainer flexDirection="column" justify="space-between" >
        <FlexContainer flexDirection="column" >
          <TextInput
            id="email"
            name="email"
            onChange={handleChange}
            value={values.email || ''}
            placeholder="Email"
            onFocus={(e) => e.target.placeholder = ""}
            onBlur={(e) => e.target.placeholder = "Email"}
          />
          {errors.email && <ErrorMessage>{errors.email}</ErrorMessage>}
          <TextInput
            id="password"
            name="password"
            onChange={handleChange}
            type="password"
            value={values.password || ''}
            placeholder="Password"
            onFocus={(e) => e.target.placeholder = ""}
            onBlur={(e) => e.target.placeholder = "Password"}
          />
          {errors.password && <ErrorMessage>{errors.password}</ErrorMessage>}
        </FlexContainer>
        <FlexContainer flexDirection='column' >
          <Button type="submit" buttonText={buttonText} buttonSize="large"/>
        </FlexContainer>
      </FlexContainer>
    </Form>
  )
};
...
function validate(values) {
  let errors = {};
  if (!values.email) {
    errors.email = 'Email address is required';
  } else if (!/^([a-zA-Z0-9_\-\.]+)@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{2,4}|[0-9]{1,3})(\]?)$/.test(values.email)) {
    errors.email = 'Email address is invalid';
  }
  if (!values.password) {
    errors.password = 'Password is required';
  } else if (values.password.length < 8) {
    errors.password = 'Password must be 8 or more characters';
  }
  return errors;
};

export default AuthForm;

考虑到大多数代码都是相同的（只是重新定位到一个钩子），我不知道为什么它会导致在树的更高位置重新渲染

AuthForm由AuthContainer呈现，AuthContainer由AuthPage呈现。AuthPage是渲染背景图像的位置

AuthPage.js

const Background = styled.div`
  background-image: url('myimage.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 90vh;
`

const AuthPage = (props) => (

  <Background>
    <FlexContainer justify="space-evenly" padding="100px 40px 0 40px" wrap="nowrap">
      <AuthContainer {...props}/>
      <AsideContainer {...props} />
    </FlexContainer>
  </Background>
)

export default AuthPage;

const Background=styled.div`
背景图片：url（'myimage.jpg'）；
背景重复：无重复；
背景尺寸：封面；
最小高度：90vh；
`
const AuthPage=（道具）=>(
)
导出默认AuthPage；

AuthPage是什么样子的？将AuthPage添加到原始邮件中，您说的是

AuthPage

表单提交时重新提交？背景图像闪烁并重新加载，所以我假设这就是发生的事情。我想知道它是否与onAuth函数有关，因为它使用的是类似于历史对象的东西。AuthPage是什么样子的？将AuthPage添加到原始Post中，而您说的是在表单提交时重新加载？背景图像会闪烁并重新加载，所以我假设这就是正在发生的事情。我想知道它是否与onAuth的

onAuth

函数有关，因为它取的是看起来像历史对象的东西。

const Background = styled.div`
  background-image: url('myimage.jpg');
  background-repeat: no-repeat;
  background-size: cover;
  min-height: 90vh;
`

const AuthPage = (props) => (

  <Background>
    <FlexContainer justify="space-evenly" padding="100px 40px 0 40px" wrap="nowrap">
      <AuthContainer {...props}/>
      <AsideContainer {...props} />
    </FlexContainer>
  </Background>
)

export default AuthPage;