Reactjs 多次调用UseEffect会导致问题

有人能解释为什么多次调用useffect钩子（如下面的代码）会导致过时状态吗

imports ...

function App () {
  const classes = useStyles()
  const [formState, setFormState] = useState({
    ageLevel: '',
    schoolGrade: '',
    booksCategories: '',
    numTitle: '',
    titleTypes: '',
    materialType: '',
    subjInterest: '',
    pastBook: '',
    numOfBags: '',
    bag1: '',
    bag2: '',
  })

  const handleTxtFldChange = (e, name) => {
    setFormState({ ...formState, [name]: e.target.value })
  }
  useEffect(() => {
    if (formState.ageLevel !== 'Adults') {
      setFormState({
        ...formState,
        numTitle: '',
        materialType: '',
        subjInterest: '',
        pastBook: ''

      })
    }
  }, [formState.ageLevel])

  useEffect(() => {
    if (formState.ageLevel !== 'Toddlers' || formState.ageLevel !== 'Preschoolers') {
      setFormState({
        ...formState,
        numOfBags: '',
        bag1: '',
        bag2: ''
      })
    }
  }, [formState.ageLevel])

  useEffect(() => {
    if (formState.ageLevel !== 'School-Age') {
      setFormState({
        ...formState,
        schoolGrade: '',
        booksCategories: ''
      })
    }
  }, [formState.ageLevel])

  useEffect(() => {
    if (formState.ageLevel !== 'Teens') {
      setFormState({
        ...formState,
        titleTypes: '',
        subjInterest: '',
        pastBook: ''
      })
    }
  }, [formState.ageLevel])
  return (
    <>
      <div className='App'>
        <Container>
            <AgeLevelSelect
              formState={formState}
              setFormState={setFormState}
            />
            <GradeSelect
              formState={formState}
              setFormState={setFormState}
            />
            <BooksCategories
              formState={formState}
              setFormState={setFormState}
            />
            <NumTitles
              formState={formState}
              setFormState={setFormState}
              ageLevel={formState.ageLevel}
            />
            <TypeOfTitles
              formState={formState}
              setFormState={setFormState}
              ageLevel={formState.ageLevel}
              location={formState.location}
            />
            <TypeOfMaterial
              formState={formState}
              setFormState={setFormState}
              ageLevel={formState.ageLevel}
            />
            <SubjOfInterest
              formState={formState}
              setFormState={setFormState}
              ageLevel={formState.ageLevel}
              materialType={formState.materialType}
            />
            <PastBook
              formState={formState}
              setFormState={setFormState}
              ageLevel={formState.ageLevel}
              materialType={formState.materialType}

            />
            <NumOfBag
              formState={formState}
              setFormState={setFormState}
              ageLevel={formState.ageLevel}
            />
            <Bag1
              formState={formState}
              setFormState={setFormState}
              numOfBags={formState.numBookBags}
            />
            <Bag2
              formState={formState}
              setFormState={setFormState}
              numOfBags={formState.numBookBags}
            />
          </form>
        </Container>
      </div>
    </>
  )
}

export default App

导入。。。
函数应用程序（）{
常量类=useStyles（）
常量[formState，setFormState]=useState({
年龄级别：“”，
学校年级：''，
书籍类别：''，
numTitle:“”，
标题类型：“”，
材料类型：“”，
利息：''，
糕点：，
努莫夫：，
bag1:“，
bag2:“，
})
const handleTxtFldChange=（e，name）=>{
setFormState（{…formState，[名称]：e.target.value}）
}
useffect（（）=>{
如果（formState.ageLevel！==‘成人’）{
setFormState({
…formState，
numTitle:“”，
材料类型：“”，
利息：''，
pastBook:'
})
}
}，[formState.ageLevel]）
useffect（（）=>{
if（formState.ageLevel！=“学步儿童”| | formState.ageLevel！=“学龄前儿童”）{
setFormState({
…formState，
努莫夫：，
bag1:“，
bag2:'
})
}
}，[formState.ageLevel]）
useffect（（）=>{
如果（formState.ageLevel！=“学龄”）{
setFormState({
…formState，
学校年级：''，
书籍类别：“”
})
}
}，[formState.ageLevel]）
useffect（（）=>{
如果（formState.ageLevel！==‘青少年’）{
setFormState({
…formState，
标题类型：“”，
利息：''，
pastBook:'
})
}
}，[formState.ageLevel]）
返回(
)
}
导出默认应用程序

有什么想法吗，我做错了什么？

---

我所要做的就是在用户关闭和打开表单中的问题时重置部分状态，但显然，我缺少一些基本的react概念。

这是因为

formState

不包括在

useffect

s依赖项数组中，而是在

useffect

s中使用

但是，如果将其添加到

useffect

s依赖项数组中，您将收到一个无限循环

要解决此问题，您可以使用

setState

的回调语法，不要求它位于依赖项数组中，但仍然接收当前值

function App () {
  const classes = useStyles()
  const [formState, setFormState] = useState({
    ageLevel: '',
    schoolGrade: '',
    booksCategories: '',
    numTitle: '',
    titleTypes: '',
    materialType: '',
    subjInterest: '',
    pastBook: '',
    numOfBags: '',
    bag1: '',
    bag2: '',
  })

  const handleTxtFldChange = (e, name) => {
    setFormState({ ...formState, [name]: e.target.value })
  }

  useEffect(() => {
    setFormState(currentState => {
        const newState = { ...currentState };

        if (formState.ageLevel !== 'Adults') {
            newState.numTitle = '';
            newState.materialType = '';
            newState.subjInterest = '';
            newState.pastBook = ''
        }

        if (formState.ageLevel !== 'Toddlers' && formState.ageLevel !== 'Preschoolers') {
            newState.numOfBags = '';
            newState.bag1 = '';
            newState.bag2 = '';
        }

        if (formState.ageLevel !== 'Teens') {
            newState.titleTypes = '';
            newState.subjInterest = '';
            newState.pastBook = '';
        }

        return newState;
    });
  }, [formState.ageLevel]);

  return (
    <>
      <div className='App'>
        <Container>
            <AgeLevelSelect
              formState={formState}
              setFormState={setFormState}
            />
            <GradeSelect
              formState={formState}
              setFormState={setFormState}
            />
            <BooksCategories
              formState={formState}
              setFormState={setFormState}
            />
            <NumTitles
              formState={formState}
              setFormState={setFormState}
              ageLevel={formState.ageLevel}
            />
            <TypeOfTitles
              formState={formState}
              setFormState={setFormState}
              ageLevel={formState.ageLevel}
              location={formState.location}
            />
            <TypeOfMaterial
              formState={formState}
              setFormState={setFormState}
              ageLevel={formState.ageLevel}
            />
            <SubjOfInterest
              formState={formState}
              setFormState={setFormState}
              ageLevel={formState.ageLevel}
              materialType={formState.materialType}
            />
            <PastBook
              formState={formState}
              setFormState={setFormState}
              ageLevel={formState.ageLevel}
              materialType={formState.materialType}

            />
            <NumOfBag
              formState={formState}
              setFormState={setFormState}
              ageLevel={formState.ageLevel}
            />
            <Bag1
              formState={formState}
              setFormState={setFormState}
              numOfBags={formState.numBookBags}
            />
            <Bag2
              formState={formState}
              setFormState={setFormState}
              numOfBags={formState.numBookBags}
            />
          </form>
        </Container>
      </div>
    </>
  )
}

export default App

函数应用程序（）{
常量类=useStyles（）
常量[formState，setFormState]=useState({
年龄级别：“”，
学校年级：''，
书籍类别：''，
numTitle:“”，
标题类型：“”，
材料类型：“”，
利息：''，
糕点：，
努莫夫：，
bag1:“，
bag2:“，
})
const handleTxtFldChange=（e，name）=>{
setFormState（{…formState，[名称]：e.target.value}）
}
useffect（（）=>{
setFormState（currentState=>{
const newState={…currentState}；
如果（formState.ageLevel！==‘成人’）{
newState.numTitle=''；
newState.materialType=''；
newState.subjectinterest=''；
newState.pastBook=“”
}
if（formState.ageLevel！=“学步儿童”和&formState.ageLevel！=“学龄前儿童”）{
newState.numobags=''；
newState.bag1=''；
newState.bag2=''；
}
如果（formState.ageLevel！==‘青少年’）{
newState.titleTypes=''；
newState.subjectinterest=''；
newState.pastBook=''；
}
返回新闻状态；
});
}，[formState.ageLevel]）；
返回(
)
}
导出默认应用程序

---

注意：我假设

if（formState.ageLevel！==“蹒跚学步的孩子”| | formState.ageLevel！==“学龄前儿童”）

应该是

if（formState.ageLevel！==“蹒跚学步的孩子”&&formState.ageLevel！==“学龄前儿童”）

否则它的计算结果总是正确的。

这非常有效，尽管我不得不更改第一条if语句中的一个小错误。将“，”替换为“；”。非常感谢。仅供参考：编辑只有在得到可信社区成员的批准后才能对我可见。我的错，谢谢你的帮助。