Javascript 对许多重播者的反应

太多的重新渲染。React限制渲染的数量以防止无限循环。 当我放置这些行时，它会向许多重新渲染器显示错误。我已经将onClick和onSubmit函数包装到了arrow函数中，即使它显示了错误

if(fields){
     setFormFields({
       company: !loading && !fields.company ? "" : fields.company,
     })
   }

下面的代码中提到了这些行

import React, { useState, useEffect } from "react";
import Title from "../Title";
import { Container, Form } from "react-bootstrap";
import { createProfile, getProfile } from "../../redux/profile/ProfileAction";
import { connect, useSelector } from "react-redux";

const EditProfile = ({
  createProfile,
  getProfile,
  profile: { loading, fields },
}) => {
  const style = {
    color: "#1e5799",
    fontWeight: "600",
    fontSize: "3rem",
  };

  const [formFields, setFormFields] = useState({
    status: "",
    company: "",
    website: "",
    location: "",
    skills: "",
    bio: "",
    githubusername: "",
  });

  const {
    status,
    company,
    website,
    location,
    skills,
    bio,
    githubusername,
  } = formFields;

  useEffect(() => {
    getProfile();
  }, [])
  // When I remove comment lines from below then it shows the error.
  // if(fields){
  //   setFormFields({
  //     company: !loading && !fields.company ? "" : fields.company,
  //   })
  // }

  const onChange = (e) => {
    setFormFields({ ...formFields, [e.target.name]: e.target.value });
  };

  const onSubmit = (e) => {
    e.preventDefault();
    createProfile({
      status,
      company,
      website,
      location,
      skills,
      bio,
      githubusername,
    });
  };
  return (
    <section className="edit-profile-section">
      <Container>
        <Title style={style} title="Create Your Profile" />
        <h3>Let's get some information to make your profile stand out</h3>
        <Form onSubmit={e=>onSubmit(e)}>
          <Form.Group controlId="status">
            <Form.Control
              value={status}
              onChange={e=>onChange(e)}
              name="status"
              as="select"
            >
              <option value="engineer">Engineer</option>
              <option value="manager">Manager</option>
              <option value="developer">Developer</option>
              <option value="analyst">Analyst</option>
              <option value="student">Student</option>
              <option value="teacher">Teacher</option>
            </Form.Control>
          </Form.Group>
          <Form.Group controlId="company">
            <Form.Control
              value={company}
              onChange={(e) => onChange(e)}
              type="text"
              name="company"
              placeholder="Enter company"
            />
          </Form.Group>
          <Form.Group controlId="website">
            <Form.Control
              value={website}
              onChange={(e) => onChange(e)}
              type="text"
              name="website"
              placeholder="Enter website"
            />
          </Form.Group>
          <Form.Group controlId="location">
            <Form.Control
              value={location}
              onChange={(e) => onChange(e)}
              type="text"
              name="location"
              placeholder="Enter location"
            />
          </Form.Group>
          <Form.Group controlId="skills">
            <Form.Control
              value={skills}
              onChange={(e) => onChange(e)}
              type="text"
              name="skills"
              placeholder="Enter skills"
            />
          </Form.Group>
          <Form.Group controlId="githubusername">
            <Form.Control
              value={githubusername}
              onChange={(e) => onChange(e)}
              type="text"
              name="githubusername"
              placeholder="Enter githubusername"
            />
          </Form.Group>
          <Form.Group controlId="bio">
            <Form.Control
              value={bio}
              onChange={(e) => onChange(e)}
              type="text"
              name="bio"
              placeholder="Enter bio"
            />
          </Form.Group>
          <button className="body-button" onClick={e=>onSubmit(e)}>
            Submit
          </button>
        </Form>
      </Container>
    </section>
  );
};

const mapStateToProps = (state) => ({
  profile: state.profile,
});

export default connect(mapStateToProps, { createProfile, getProfile })(
  EditProfile
);

import React，{useState，useffect}来自“React”；
从“./标题”导入标题；
从“react bootstrap”导入{Container，Form}；
从“../../redux/profile/ProfileAction”导入{createProfile，getProfile}”；
从“react-redux”导入{connect，useSelector}；
常量编辑配置文件=({
createProfile，
getProfile，
配置文件：{正在加载，字段}，
}) => {
常量样式={
颜色：“1e5799”，
重量：“600”，
字体大小：“3rem”，
};
常量[formFields，setFormFields]=useState({
地位：“，
公司：“，
网站：“，
地点：“，
技能：“，
生物信息：“，
githubusername:“”，
});
常数{
地位
公司，
网站，
位置，
技能，
生物
githubusername，
}=表单字段；
useffect（（）=>{
getProfile（）；
}, [])
//当我从下面删除注释行时，它会显示错误。
//如果（字段）{
//setFormFields({
//公司：！加载&！fields.company？”“：fields.company，
//   })
// }
const onChange=（e）=>{
setFormFields（{…formFields，[e.target.name]：e.target.value}）；
};
const onSubmit=（e）=>{
e、 预防默认值（）；
createProfile({
地位
公司，
网站，
位置，
技能，
生物
githubusername，
});
};
返回(
让我们了解一些信息，让您的个人资料脱颖而出
onSubmit（e）}>
onChange（e）}
name=“status”
as=“选择”
>
工程师
经理
开发商
分析师
学生
老师
onChange（e）}
type=“text”
name=“公司”
占位符=“输入公司”
/>
onChange（e）}
type=“text”
name=“网站”
占位符=“输入网站”
/>
onChange（e）}
type=“text”
name=“位置”
占位符=“输入位置”
/>
onChange（e）}
type=“text”
name=“技能”
占位符=“输入技能”
/>
onChange（e）}
type=“text”
name=“githubusername”
占位符=“输入用户名”
/>
onChange（e）}
type=“text”
name=“bio”
占位符=“输入bio”
/>
onSubmit（e）}>
提交
);
};
常量mapStateToProps=（状态）=>({
profile:state.profile，
});
导出默认连接（mapStateToProps，{createProfile，getProfile}）(
编辑档案
);

错误是有意义的：每次组件重新渲染时，您都在设置状态（通过调用

setFormFields

），这本身会导致重新渲染，从而导致无限循环