代码之家 › 专栏 › 技术社区 › SkyeBoniwell

在由AXIOS GET请求填充的组件中显示数组

react-component axios reactjs

1

SkyeBoniwell · 技术社区 · 6 年前

我有一个React组件,它使用AXIOS从一个API获取大量照片。

它可以工作,但现在我不知道如何显示组件中的图像。

如何使用照片数组并在组件中显示它们?

以下是AXIOS返回的数组的屏幕截图:

这是我的组件:

class ImagePlayer extends Component {

componentDidMount() {
    axios.get(`/api/gameRPG/monsterImages/${this.props.encounterId}/pics`)
        .then((response) => {
            console.log(response);
        })
        .catch((error) => {
            console.log(error);
        });

}
render() {
    return (
        <div>
            <div>Show Encounter Pics</div>
            <div></div>
        </div>
    );
}
}

export default ImagePlayer;

谢谢!

1 回复 | 直到 6 年前

1

3

butchyyyy 6 年前

您可以将响应数据存储到组件的状态中:

this.setState({photos: response.data})

然后在渲染方法中使用组件的状态:

this.state.photos.map((photo) => ...some render logic here...)

如果您正在构建某种更大的/生产应用程序,我建议将本地组件的状态容器(Redux)中的数据外部化,并使用中间件查询后端(组件中没有直接调用AXIOS)。