反应本机返回图像函数

Question

我将如何调用函数列表第 6 行的项以在返回中运行？
我尝试使用图像和文本，但都不起作用。

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 调用呈现内容时，通常的做法是在组件装载时触发该 API 调用一次，使用调用componentDidUpdate的组件生命周期，并将 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/