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 должна отображаться один раз. Однако, похоже, она продолжает пересматриваться.

0
conner brain 17 Янв 2022 в 12:45
Вы не можете использовать переменную flag таким образом... используйте const [flag, setFlag] = useState(true) и замените flag = false на setFlag(false). Когда вы пишете функциональный компонент, при каждом повторном рендеринге вызывается функция, которая создает новую переменную flag. Кроме того, если вы хотите, чтобы эффект срабатывал только один раз, вы должны передать [] в качестве второго аргумента useEffect, иначе эффект будет выполняться при каждом повторном рендеринге. Что касается того, почему компоненты перерисовываются, я не уверен, нам нужен полный пример для отладки этого.
 – 
GACy20
17 Янв 2022 в 12:49

4 ответа

Для выполнения useEffect только после того, как вам нужно добавить массив зависимостей без зависимости. Что-то вроде этого:

useEffect(() => {
    // this code will execute only once after first render.
   // some code...
}, [])
0
Shorya Vaish 17 Янв 2022 в 12:59

Вы не добавили массив зависимостей в функцию useEffect. Следовательно, это обязательно будет бесконечный повторный рендеринг.

И реагировать не рекомендует 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 />
}

...
0
hong developer 17 Янв 2022 в 12:59
Если мой ответ был полезен, нажмите кнопку «Проголосовать» (▲) слева от него. Если он ответил на ваш вопрос, нажмите галочку (✓), чтобы принять его. Таким образом, другие узнают, что вам (достаточно) помогли. Также см. Stackoverflow.com/help/someone-answers
 – 
hong developer
17 Янв 2022 в 13:02

Если вы хотите запустить эффект и очистить его только один раз (при монтировании и размонтировании), вы можете передать пустой массив ([]) в качестве второго аргумента useEffect.

useEffect(() => {}, [])
0
Yaman KATBY 17 Янв 2022 в 13:10

Вы можете попробовать это? вы должны установить флаг в состояние, иначе при каждом рендеринге он будет ложным.

export default function CreatePage() {
    let [state,setState]=useState({})
    let [flag,setFlag]=useState(true)
    useEffect(()=>{
        fetchData()
    })
    
    const fetchData = async ()=>{
        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(()=>{setFlag(false)})
        
        }
    }
    
    
    return (
        <View >
            <Text>hh</Text>
            <Icon name="heart" size={24} color="#4F8EF7" />
            <Text>first page</Text>
            <Text>{state.name}</Text>
            
        </View>
    )
}
-1
Amit Dutta 17 Янв 2022 в 12:52
Это вызывает повторяющийся рендеринг.
 – 
hong developer
17 Янв 2022 в 13:01