javascript - React 重新渲染次数过多

Question

我正在关注 serverless-stack.com 教程。但在创建登录按钮后我陷入困境。

我不断收到错误:

Uncaught Error: Too many re-renders. React limits the number of renders to prevent an infinite loop.

我不知道是什么导致渲染了这么多次。我合并了 LoaderButton 而不是导入以使其更简单。

import React, { useState } from "react";
import { Auth } from "aws-amplify";
import { useHistory } from "react-router-dom";
import { FormGroup, FormControl, ControlLabel } from "react-bootstrap";
import { useFormFields } from "../libs/hooksLib";
import { onError } from "../libs/errorLib";
import "../css/index.css";

const LoaderButton = (
  isLoading,
  className = "",
  disabled = false,
  ...props ) => {
    return(
    <Button
      className={`LoaderButton ${className}`}
      disabled={disabled || isLoading}
      {...props}
    >
      {isLoading && <Glyphicon glyph="refresh" className="spinning" />}
      {props.children}
    </Button>
    )
};

export default function Login() {
  let history = useHistory();
  const [isLoading, setIsLoading] = useState(false);
  const [fields, handleFieldChange] = useFormFields({
    email: "",
    password: ""
  });

  function validateForm() {
    return fields.email.length > 0 && fields.password.length > 0;
  }

  async function handleSubmit(event) {
    event.preventDefault();

    setIsLoading(true);

    try {
      await Auth.signIn(fields.email, fields.password);
      userHasAuthenticated(true);
      console.log(history);
      //history.push("/");
    } catch (e) {
      onError(e);
      setIsLoading(false);
    }
  }

  return (
    <div className="Login">
      <form onSubmit={ () => { handleSubmit() } }>
        <FormGroup controlId="email" bsSize="large">
          <ControlLabel>Email</ControlLabel>
          <FormControl
            autoFocus
            type="email"
            value={fields.email}
            onChange={ () => { handleFieldChange() } }
          />
        </FormGroup>
        <FormGroup controlId="password" bsSize="large">
          <ControlLabel>Password</ControlLabel>
          <FormControl
            type="password"
            value={fields.password}
            onChange={ () => { handleFieldChange() } }
          />
        </FormGroup>
          <LoaderButton
            block
            type="submit"
            bsSize="large"
            isLoading={ () => { isLoading() } }
            disabled={() => { !validateForm() }}
          >
            Login
          </LoaderButton>
      </form>
    </div>
  );
}

hooksLib.js/useFormFields

import { useState } from 'react'

const useFormFields = (initalState) => {
  const [fields, setValues] = useState(initalState)

  return [
    fields,
    setValues({
      ...fields,
      [event.target.id]: event.target.value
    })
  ]
}

export { useFormFields }

Answer 1

如果您想接受事件值，您的自定义 Hook 应该如下所示:

const useFormFields = (initalState) => {
  const [fields, setValues] = useState(initalState)

  return [
    fields,
    (event) => setValues({
      ...fields,
      [event.target.id]: event.target.value
    })
  ]
}

因为该参数实际上是应该发生的回调。

<小时/>

此外，您的 LoadingButton 实现需要更改为:

<LoaderButton
  block
  type="submit"
  bsSize="large"
  isLoading={isLoading} // This is a boolean value, not a function
  disabled={() => !validateForm()}
>...</LoaderButton>