Question

我如何调用第6行上的listItems函数以在返回中运行？
我尝试使用“图片”和“文字”进行尝试，但都无法正常工作。

export default class GifPicture extends Component {

render() { 
const gifs = [
    "travel", "wandering", "lost", "best", "earliest-list", "favourites", "writer", "sad", "crying", "death", "learning", "technology", "help", "comedy", "funny", "humor", "humour", "satire", "old", "ancient", "storm", "cloudy", "celebrity", "movies", "blond", "fantasy", "sci-fi", "science-fiction", "sf", "classics", "business", "career", "creativity", "fitness", "happiness", "health", "love", "non-fiction", "nonfiction", "productivity", "relationships", "romance", "self-help", "success", "wellness", "baseball", "sports", "book club", "historical", "literary", "summer", "sunny", "clear", "warm", "autumn", "books", "coffee", "creep", "creepy", "dark", "fall", "fireplace", "freaky", "halloween", "leaves", "november", "october", "pumpkin", "rain", "rainy", "reading", "scary", "september", "spooky", "sweater", "tea", "thanksgiving", "intrigue", "mystery", "thriller", "fiction", "seasons", "setting", "weather", "winter", "cold", "warmup"
];
const listItems = gifs.map((gif) => {
    axios
    .get("https://api.giphy.com/v1/gifs/random?api_key=#####&tag=cats", {params: {q: {gif}}})
    .then( (results) => { 
        var imageUrl = response.data.image_original_url;

        <Image source = {imageUrl} />
        console.warn(results.data.image_original_url); 
    })
    .catch(err => console.log(err));   
})  
    return ( 
        <View>
            <Image source= {listItems}/>
    </View>
    );
}}

Answer 1

如果您不进行异步axios调用，那将是一个非常简单的解决方案。

当您依靠应用程序基于API调用呈现内容时，通常的做法是，在挂载组件时使用称为componentDidUpdate的组件生命周期触发一次API调用并保存API的结果呼叫状态。

最初，您的组件将呈现一个空白屏幕。

一旦所有图片下载完毕，您可以通过调用this.setState()来更新组件的状态，如下例所示：

export default class GifPicture extends Component {
    constructor(props) {
        super(props)
        this.state = {
            imageUrls: [],
        }
    }

    componentDidMount() {
        this.fetchImageUrls()
    }

    fetchImageUrls = () => {
        const gifs = [
            "travel", "wandering", "lost", "best", "earliest-list", "favourites", "writer", "sad", "crying", "death", "learning", "technology", "help", "comedy", "funny", "humor", "humour", "satire", "old", "ancient", "storm", "cloudy", "celebrity", "movies", "blond", "fantasy", "sci-fi", "science-fiction", "sf", "classics", "business", "career", "creativity", "fitness", "happiness", "health", "love", "non-fiction", "nonfiction", "productivity", "relationships", "romance", "self-help", "success", "wellness", "baseball", "sports", "book club", "historical", "literary", "summer", "sunny", "clear", "warm", "autumn", "books", "coffee", "creep", "creepy", "dark", "fall", "fireplace", "freaky", "halloween", "leaves", "november", "october", "pumpkin", "rain", "rainy", "reading", "scary", "september", "spooky", "sweater", "tea", "thanksgiving", "intrigue", "mystery", "thriller", "fiction", "seasons", "setting", "weather", "winter", "cold", "warmup"
        ];
        Promise.all(
            gifs.map(gif => {
                return axios
                    .get(
                        'https://api.giphy.com/v1/gifs/random?api_key=#####&tag=cats',
                        { params: { q: { gif } } }
                    )
                    .then(response => {
                        var imageUrl = response.data.image_original_url
                        return imageUrl
                    })
                    .catch(err => console.log(err))
            })
        )
            .then(arrayOfImageUrls => {
                this.setState({ imageUrls: arrayOfImageUrls })
            })
            .catch(err => {
                console.error('Any one of the axios calls failed...', err)
            })
    }

    render() {
        const { imageUrls } = this.state
        return (
            <View>
                {imageUrls.map((imageUrl, index) => (
                    <Image key={index} source={imageUrl} />
                ))}
            </View>
        )
    }
}

更新组件的状态将触发重新渲染，从而导致图像显示。

有关Component生命周期方法的更多信息：https://reactjs.org/docs/react-component.html

在此处了解有关在React上获取数据的信息：https://daveceddia.com/where-fetch-data-componentwillmount-vs-componentdidmount/

反应本机返回图像功能

1 个答案: