为什么useEffect被无限地称为

Question

在react组件中的useEffect中，我获取数据并更新状态，但我不知道为什么总是执行useEffect：

const Comp1 = () => {
    const [studies, setStudies]= useState([]);
    React.useEffect( async()=>{
          await axios.get('/api/expert/',
         )
        .then((response) => {
          setStudies(response.data.studies);     
    
        },  (error) => {
          console.log(error );
        })
          console.log("called+ "+ studies);
    
    },[studies]);
    return(
         <Comp2 studies={studies}/>
          )

}

这是我在第一个组件中使用的第二个组件..。

 const Comp2 = (props) => {
        const [studies, setStudies]= useState([]);
        React.useEffect( ()=>{

              setStudies(props.studies)
        
        },[props.studies, studies]);


        return(
             studies.map((study)=>{console.log(study)})
    
    }

Answer 1

编辑

const Comp2 = (props) => {

  // for some brief time props.studies will be an empty array, []
  // you need to decide what to do while props.studies is empty.

  // you can show some loading message, show some loading status,
  // show an empty list, do whatever you want to indicate
  // progress, dont anxious out your users
  return (
    props.studies.map((study)=>{console.log(study)}
  )
}

您的useEffect钩子取决于状态研究收到的更新。在这个useEffect钩子中，您可以更新研究。你能看到useEffect触发自己吗？

每当B更新时，A就会运行。(永远继续)

我会怎么做？

const Comp1 = () => {
  const [studies, setStudies]= useState([]);
  React.useEffect(() => {
    const asyncCall = async () => {
      await axios.get('/api/expert/',
      )
      .then((response) => {
        setStudies(response.data.studies);     
      }, (error) => {
        console.log(error );
      })
      
      console.log("called+ "+ studies);
    }
      
    asyncCall();
  }, []);

  return(
    <Comp2 studies={studies}/>
  )
}

Answer 2

useEffect()有依赖数组，如果它中有任何值更新，就会执行它。在这里，setStudies更新作为依赖数组提供的studies，并使它再次运行等等。若要防止这种情况，请从依赖项数组中删除studies。参考：How the useEffect Hook Works (with Examples)