Axios GET 请求组件未在 React JS 中呈现

Question

承诺完成后，我无法将我的组件渲染到屏幕上。我正在使用 imgur api 发送请求，请求一切正常，我正在从 API 接收回数据。但是，当我从我的组件更新状态并传入道具时，没有收到任何数据。

这是我的父组件app.js

import React, {Component} from 'react';
import axios from 'axios';
import ImageList from './image_list';

export default class App extends Component {
    constructor(props) {
        super(props);
        this.state = {images: []};
    }

    componentWillMount() {
        // IMGUR_URL returns an array of 60 objects.
        axios.get(IMGUR_URL).then(res => this.setState({images: res.data.data}));
    }

    render() {
        return (
            <div>
                // Passing in the images state
                <ImageList images={this.state.images} />
            </div>
        );
    }
}

我看到了一些使用 componentDidMount 函数的例子。但是，我没有看到我的应用有任何变化。

这是我的两个子组件： props 值来自 ImageList 组件。

image_detail.js

import React, {Component} from 'react';

export default class ImageDetail extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                <li>
                    <img src={this.props.image.images[0].link} alt={this.props.image.title} />
                </li>
            </div>
        );
    }
}

props 值来自 App.js 来自 axios GET 请求。所以我不确定我在这里遗漏了什么。

image_list.js

import React, {Component} from 'react';
import ImageDetail from './image_detail';

export default class ImageList extends Component {
    constructor(props) {
        super(props);

        this.RenderedImages = this.props.images.map(image => <ImageDetail key={image.id} image={image} />);
    }

    render() {
        return (
            <div>
                <ul> {this.RenderedImages} </ul>
            </div>
        );
    }
}

还有一个问题，我应该在constructor方法里面放什么？

Answer 1

And also another question, what should I put inside the constructor method?

一般情况下，状态初始化应该放在构造函数中

对于ImageList组件，我建议你将RenderedImages移动到render函数中，像这样：

import React, {Component} from 'react';
import ImageDetail from './image_detail';

export default class ImageList extends Component {
    constructor(props) {
        super(props);
    }

    render() {
        return (
            <div>
                <ul> {this.props.images.map(image => <ImageDetail key={image.id} image={image} />)} </ul>
            </div>
        );
    }
}

Axios GET 请求组件未在 React JS 中呈现

Axios GET request component not being rended on ReactJS

meteor

reactjs

axios