在 react native 的渲染中使用变量

Question

我需要使用 json 中的 url 并将其呈现在屏幕上，使用 React Native 和 axios。 我得到了这个网址：

teste() {

        api.get('photos').then(

            function imagens(response) {
                var i = 1;           
                for (i; i < 2; i++) {
                    urlDaImagem = response.data[i].url
                    console.log('em cima->' + urlDaImagem)
                }
                return urlDaImagem
            })

    }

我需要将“urlDaImagem”放在 Image 组件中。 整个代码：

    import React from 'react';

import {
    SafeAreaView,
    StyleSheet,
    ScrollView,
    View,
    Image,
    StatusBar
} from 'react-native';

import api from '../api';

var urlDaImagem

class PaginaPrincipal extends React.Component {

    teste() {

        api.get('photos').then(

            function imagens(response) {
                var i = 1;           
                for (i; i < 2; i++) {
                    urlDaImagem = response.data[i].url
                    console.log('em cima->' + urlDaImagem)
                }
                return urlDaImagem
            })

    }

    render() {   

        return (
        
            <>
                <StatusBar barStyle="dark-content" />
                <SafeAreaView>
                    <ScrollView contentInsetAdjustmentBehavior="automatic">
                        <View style={styles.sideBySideImages}>
                            <Image style={styles.imagens} source={{ uri: urlDaImagem }} />

                        </View>
                    </ScrollView>
                </SafeAreaView>
            </>
        )
    }
}


const styles = StyleSheet.create({
    imagens: {
        width: "45%",
        height: 183,
        marginBottom: 5,
        marginTop: 5,
        marginStart: "3%",
        marginEnd: "1%"
    },
    sideBySideImages: {
        flex: 1,
        flexDirection: 'row',
        flexWrap: 'wrap'
    }
});

export default PaginaPrincipal;

Answer 1

要从 API 加载数据，最好使用 useEffect 钩子（React native 支持它）： https://reactjs.org/docs/hooks-effect.html#explanation-why-effects-run-on-each-update

此外，要正常工作的 React 应该控制组件的状态。例如，您必须通过 useState 钩子声明状态。没有技巧，全局变量将无法工作）

function PaginaPrincipal(props) {
  const [urlDaImagem, setUrlDaImagem] = useState();
  useEffect(
    () => {
      api.get('photos').then(({ data }) => {
        console.log(data);
        const [{ url }] = data;
        setUrlDaImagem(url);
      });
    },
    [] // Effect does not depend on any props
  );
  return (
    <>
      ...
      <Image style={styles.imagens} source={{ uri: urlDaImagem }} />
      ...
    </>
  );
}

Answer 2

你可以在你的情况下使用状态，从这里阅读它：https://reactjs.org/docs/state-and-lifecycle.html

我更新了你的代码尝试测试它，并查看调用 teste 函数的最佳生命周期，这应该可以解决问题

import React from 'react';
import {
    SafeAreaView,
    StyleSheet,
    ScrollView,
    View,
    Image,
    StatusBar
} from 'react-native';

import api from '../api';


class PaginaPrincipal extends React.Component {
    state={
           urlDaImagem:""
          }
    teste() {

        api.get('photos').then(

            function imagens(response) {
                var i = 1;
                let urlDaImagem;
                for (i; i < 2; i++) {
                    urlDaImagem = response.data[i].url
                    console.log('em cima->' + urlDaImagem)
                }
                this.setState({urlDaImagem})
            })

    }

    render() {   

        return (
        
            <>
                <StatusBar barStyle="dark-content" />
{ this.state.urlDaImagem && 
                <SafeAreaView>
                    <ScrollView contentInsetAdjustmentBehavior="automatic">
                        <View style={styles.sideBySideImages}>
                           <Image style={styles.imagens} source={{ uri: this.state.urlDaImagem }} /> 

                        </View>
                    </ScrollView>
                </SafeAreaView>
}
            </>
        )
    }
}


const styles = StyleSheet.create({
    imagens: {
        width: "45%",
        height: 183,
        marginBottom: 5,
        marginTop: 5,
        marginStart: "3%",
        marginEnd: "1%"
    },
    sideBySideImages: {
        flex: 1,
        flexDirection: 'row',
        flexWrap: 'wrap'
    }
});

export default PaginaPrincipal;