如果在子表单中键入太快，则使用 Effect 对导致无限循环

问：

我有一个独立更新状态数组元素的表单，但是当在表单中“键入太快”时，它的制作方式会导致无限循环。

状态应是项目的副本。每个部分都可以有多个部分，我们可以修改表单中的每个数据。sectiondata.sectionsprofilesprofile

在配置文件窗体中键入速度过快会导致 useEffect 部分无限循环。

这是通过前两个 useEffect 钩子中的 console.logs 记录的 - 组件中没有抛出过多的日志，因此必须将其绑定到组件ProfileFormsection

组件：sections

const {data, setData} = props

const [sections, setSections] = React.useState<any[]>(data.sections)

// how sections are made
// sections = [
//     {
//         name: "",
//         profiles: [
//             { name: "" }
//         ]
//     }
// ]

    React.useEffect(() => {
        if (sections && (sections !== data.sections)) {
            setData({...data, sections: sections})
        }
    }, [sections])

    React.useEffect(() => {
        if (data.sections && (data.sections !== sections)) {
            setSections(data.sections)
        }
    }, [props])

// ...

{
    sections && sections.map((section: any, sectionIndex: number) => {
        return (
           <>
               {section.name}

               {
                 section.profiles && section.profiles.map((profile: any, profileIndex: number) => (
                      <ProfileForm
                         key={profileIndex}
                         {...{sections, setSections, sectionIndex, profileIndex, profile, t}}
                       />
                 ))
               }

           </>
       )
   })
}

组件：person

const {sectionIndex, profileIndex} = props

const [profile, setProfile] = React.useState(props.profile)

    React.useEffect(() => {
        if (profile && (profile !== props.profile)) {
            handleProfileChange(sectionIndex, profileIndex)
        }
    }, [profile])

    React.useEffect(() => {
        if (props.profile && (props.profile !== profile)) {
            setProfile(props.profile)
        }
    }, [props])

    const handleProfileChange = (sectionIndex: number, profileIndex: number) => {
        let _profiles= sections[sectionIndex].profiles
        _profiles.splice(profileIndex, 1, profile)

        let _sections = [...sections]
        _sections.splice(si, 1, { name: _sections[sectionIndex].name, profiles: _profiles })
        setSections([..._sections])
    }

   return (
      <input onChange={(e: any) => setProfile({...profile, name: e.target.value})} value={profile.name} />
   )