отображение массива в компоненте, заполненном запросом Axios get

Question

У меня есть компонент реагирования, который использует 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;

Спасибо!

Answer 1

Вы можете сохранить данные ответа в состоянии компонента:

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

И затем использовать состояние компонента в методе рендеринга:

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

Если вы создаете какой-то видБолее крупное / производственное приложение, я предлагаю вывести данные из состояния локального компонента в контейнер состояния (избыточный) и использовать промежуточное программное обеспечение для запроса бэкенда (никаких вызовов axios непосредственно в вашем компоненте).