将本机 useEffect 运行反应到死循环中：

Question

export default function CreatePage() {
let [state,setState]=useState({})
let flag=true
useEffect(()=>{
    if(flag){
        axios.get('http://192.168.43.151:3001/data').then((res)=>
    {
        console.log(res.data)
        setState({...res.data})
        flag=false
        console.log(false)
      
    }
    ).catch((err)=>{console.log(err)}).finally(()=>{flag=false})

    }

    
})


return (
    <View >
        <Text>hh</Text>
        <Icon name="heart" size={24} color="#4F8EF7" />
        <Text>first page</Text>
        <Text>{state.name}</Text>
        
    </View>
)

}

代码执行后，终端继续显示：

    {"age": 25, "name": "connor", "password": "123456"}
 LOG  false
 LOG  {"age": 25, "name": "connor", "password": "123456"}
 LOG  false
 LOG  {"age": 25, "name": "connor", "password": "123456"}
 LOG  false

我对此感到困惑，useEffect 函数应该渲染一次。但是，它似乎继续被渲染。

Answer 1

仅在必须添加没有依赖项的依赖项数组时才执行 useEffect。像这样：

useEffect(() => {
    // this code will execute only once after first render.
   // some code...
}, [])

Answer 2

您没有向 useEffect 函数添加依赖项数组。所以，必然是无限重渲染。

并且react不推荐let。使用状态值。

可以添加依赖数组

const [state,setState] = useState({});
const [flag,setFlag] = useState(true);
useEffect(()=>{
    if(flag){
        axios.get('http://192.168.43.151:3001/data').then((res)=>
    {
        console.log(res.data)
        setState({...res.data})
        setFlag(false)
        console.log(false)
      
    }
    ).catch((err)=>{console.log(err)}).finally(()=>{flag=false})

    }

    
},[])


if(flag) {
   return <LoadingElem />
}

...

Answer 3

If you want to run an effect and clean it up only once (on mount and unmount), you can pass an empty array ([]) as a second argument to the useEffect.

useEffect(() => {}, [])

将本机 useEffect 运行反应到死循环中：

react native useEffect run into dead loop:

javascript

setstate

reactjs

react-native

将本机 useEffect 运行 反应到死循环中：

react native useEffect run into dead loop:

javascript

setstate

reactjs

react-native

将本机 useEffect 运行反应到死循环中：