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 должна отображаться один раз. Однако, похоже, она продолжает пересматриваться.
4 ответа
Для выполнения useEffect только после того, как вам нужно добавить массив зависимостей без зависимости. Что-то вроде этого:
useEffect(() => {
// this code will execute only once after first render.
// some code...
}, [])
Вы не добавили массив зависимостей в функцию 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 />
}
...
Если вы хотите запустить эффект и очистить его только один раз (при монтировании и размонтировании), вы можете передать пустой массив ([]) в качестве второго аргумента
useEffect.
useEffect(() => {}, [])
Вы можете попробовать это? вы должны установить флаг в состояние, иначе при каждом рендеринге он будет ложным.
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>
)
}
Похожие вопросы
Новые вопросы
javascript
По вопросам программирования на ECMAScript (JavaScript / JS) и его различных диалектах / реализациях (кроме ActionScript). Включите все соответствующие теги в свой вопрос; например, [node.js], [jquery], [json] и т. д.
En Español
flagтаким образом... используйтеconst [flag, setFlag] = useState(true)и заменитеflag = falseнаsetFlag(false). Когда вы пишете функциональный компонент, при каждом повторном рендеринге вызывается функция, которая создает новую переменнуюflag. Кроме того, если вы хотите, чтобы эффект срабатывал только один раз, вы должны передать[]в качестве второго аргументаuseEffect, иначе эффект будет выполняться при каждом повторном рендеринге. Что касается того, почему компоненты перерисовываются, я не уверен, нам нужен полный пример для отладки этого.