重新渲染过多.React限制了呈现的数量，以防止异步无状态组件中我的代码中的React Native出现无限循环

Question

面临过多的重新渲染。React限制了呈现次数，以防止异步无状态组件中我的代码中的React Native出现无限循环。

我正在尝试使用无状态组件调用异步方法。我正在尝试调用异步存储中的API。

因此，基本上我需要从Asyncstorage获取电子邮件，并需要将该链接传递到API。我试图做到这一点，但得到错误面对太多的重新渲染。React限制渲染次数以防止无限循环

import { BottomNavigation, Text } from 'react-native-paper';
import HomeScreen from './Home';
import PatientScreen from './Patient';
import OtpScreen from './Otp';
import Settings from './settings';
import SearchDoctor from './SearchDoctor';

const PatientPage = ({ navigation }) => {
const [expanded, setExpanded] = React.useState(true);
const [index, setIndex] = React.useState(0);
const [text, setText] = React.useState({
email: ''
});
const [routes] = React.useState([
{ key: 'music', title: 'Music', icon: 'queue-music' },
{ key: 'search', title: 'Search', icon: 'magnify' },
{ key: 'settings', title: 'Settings', icon: 'cog-outline' },
]);
const getData = async () => {
if (!expanded)
try {
AsyncStorage.getItem('@storage_Key').then((data) => {
let value = JSON.stringify(data);
setText({
...text,
email: value.email
})
fetch("http://localhost:8090/patient/fetchData", {
method: "POST",
headers: {
"Content-type": "application/json; charset=utf-8",
},
"body": JSON.stringify({
email: text.toShowLoginEmail
})
}).then(response => response.json()).then(response => {
console.log(response);
})
})
} catch (e) {
// error reading value
}
}
const handleValidUser = () => {
setExpanded(true);
getData();
}
handleValidUser();
const renderScene = BottomNavigation.SceneMap({
music: HomeScreen,
search: SearchDoctor,
settings: Settings,
});
return (
<BottomNavigation
navigationState={{ index, routes }}
onIndexChange={setIndex}
renderScene={renderScene}
/>
);
}
export default PatientPage;```

Answer 1

问题是，您在组件的主体中调用handleValidUser();，而恍惚状态类似于handleValidUser() -> getData() -> setText()。

因此，在每次渲染时都会调用handleValidUser，但函数本身会修改状态，从而导致重新渲染和另一次调用handleValidUser，从而创建一个循环

考虑使用useEffect只调用函数一次，或者只在某些依赖关系更改时调用

// Don't forget to import { useEffect } from 'react'
useEffect(() => {
handleValidUser();
}, []);

在这种情况下，依赖数组是空的，因此当组件挂载时，函数只会被调用一次(很像componentDidMount。有关依赖数组的更复杂使用，请参阅React useEffect。

显然，存在一些依赖关系，因此以下内容可能会起作用。

const getData = React.useCallback(async () => {
if (!expanded){
try { .... 
}
}, [expanded]); //add expanded as a dependency

const handleValidUser = React.useCallback(() => {
setExpanded(true);
getData();
}, [setExpanded, getData)

最后，修改useEffect挂钩

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

因此，每次useCallback的依赖项更改时，函数也会更改，从而导致useEffect再次激发。