Встречаясь с бесконечным l oop при использовании useEffect () в реагирующем - PullRequest
Новая
       10

Встречаясь с бесконечным l oop при использовании useEffect () в реагирующем

0 голосов
/ 23 марта 2020

Я недавно начал использовать реагировать нативно, и я строю это мобильное приложение, используя Expo. Я использую useEffect(), чтобы иметь возможность вызывать функцию внутри него. Все, что я хочу, - это дождаться, пока ответ API полностью завершится sh, прежде чем отобразить результат (который в данном случае является переменной connectionName). Я дал useEffect() функцию wallets в качестве второго параметра, потому что я хочу, чтобы API извлекался снова всякий раз, когда wallets изменяется, но я, кажется, работаю в бесконечном l oop, даже если 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>
       );
    }

Ответы [ 2 ]

0 голосов
/ 23 марта 2020

Ваш хук useEffect запускается каждый раз, когда изменяется wallets, и он вызывает fetchConnections, что вызывает setWallets, что затем вызывает хук useEffect, потому что он изменился wallets, и так далее ...

Передайте пустой массив зависимостей для useEffect: 

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

, которое заставит его работать только при монтировании.

Если вы все еще хотите вызывать fetchConnections всякий раз, когда wallets изменяется, вам не следует делать это через ловушку эффекта, потому что вы получите бесконечный l oop, который вы описали. Вместо этого, звоните fetchConnections вручную каждый раз, когда вы звоните setWallets. Вы можете сделать функцию, которая сделает это за вас: 

const [wallets, setWallets] = useState([]);
const setWalletsAndFetch = (wallets) => {
  setWallets(wallets);
  fetchConnections(wallets);
}
0 голосов
/ 23 марта 2020

Вы слушаете изменение, а затем, когда оно меняется, вы меняете его снова и снова, не останавливаясь 

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