Question

我最近开始使用react native，并且正在使用Expo构建此移动应用程序。我正在使用useEffect()来调用其中的一个函数。我只想在显示结果之前等待API的响应完全完成（在本例中为connectionName变量）。我给了useEffect()函数wallets作为第二个参数，因为我希望每当wallets发生变化时都再次获取API，但是即使wallets仍在无限循环中运行没变非常感谢您的帮助。

export default function LinksScreen() {

       const [wallets, setWallets] = React.useState([]);
       const [count, setCount] = React.useState(0);
       const [connectionName, setConnectionName] = React.useState("loading...");

       React.useEffect(() => {
          (async () => {
             fetchConnections();
          })();
       }, [wallets]);

       async function fetchConnections() {

          const res = await fetch('https://api.streetcred.id/custodian/v1/api/' + walletID + '/connections', {
             method: 'GET',
             headers: {
                Accept: 'application/json',
             },
          });
          res.json().then(res => setWallets(res)).then(setConnectionName(wallets[0].name))
       }

       return (
          <ScrollView style={styles.container} contentContainerStyle={styles.contentContainer}>
             <OptionButton
                icon="md-school"
                label={connectionName}
                onPress={() => WebBrowser.openBrowserAsync('https://docs.expo.io')}
             />
          </ScrollView>
       );
    }

Answer 1

您聆听变化，然后随着变化而不断变化，而无需停止

 React.useEffect(() => {
          (async () => {
             fetchConnections();
          })();
       }, []);//remove wallets

Answer 2

每次wallets更改时，您的useEffect钩子都会运行，并且会调用fetchConnections，后者会调用setWallets，然后触发您的useEffect钩子，因为它已更改wallets，依此类推上...

将空的依赖项数组传递给useEffect：

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

这将使其仅在安装时运行。

如果fetchConnections每次更改时仍要调用wallets，则不应该通过效果钩子来调用它，因为会得到您描述的无限循环。相反，每当您致电fetchConnections时，请手动致电setWallets。您可以创建一个为您执行此操作的函数：

const [wallets, setWallets] = useState([]);
const setWalletsAndFetch = (wallets) => {
  setWallets(wallets);
  fetchConnections(wallets);
}

在react-native中使用useEffect（）时遇到无限循环

2 个答案: