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 再次触发。

太多的重新渲染。 React 限制渲染次数以防止我的异步无状态组件代码中的 React Native 无限循环

1 个答案: