Не получать данные от вложенного JSON в реагировать на родной

Question

я хочу получить данные из вложенного json.

Мой JSON выглядит так, как показано ниже

    {
    "id": 2,
    "cover_image": "http://13.233.31.123/media/homepage-banner.jpg",
    "name": " Website",
    "tagline": " IT Right",
    "status": "ACTIVE",
    "client_name": "Company",
    "start_date": null,
    "end_date": null,
    "technology_frontend": "HTML, CSS, JAVASCRIPT\r\nCMS: WORDPRESS",
    "technology_backend": "PHP",
    "description": "We provide robust and high quality Custom Web Development.\r\nCodism is a global technology and business services consulting firm. We are specialized in servicing business market needs specializing in Web Design and Development, Online marketing and IT Consulting Services to commercial and government customers. We provide staffing and end-to end consulting services for organizations.",
    "gallery": [
        {
            "project": 2,
            "image": "http://localhost/media/gallery_image/homepage-banner.jpg"
        },
        {
            "project": 2,
            "image": "http://localhost/media/projects/gallery_image/software-development.jpg"
        },
        {
            "project": 2,
            "image": "http://localhost/media/projects/gallery_image/New_FRS_Image_Mobile_app_development.jpg"
        }
    ]
}

Я хочу получить все изображения галереи. Я не понимаю, как я могу это сделать, если я делаю console.log(this.state.gallery[0]), он показывает первый объект, но пока я делаю console.log(this.state.gallery[0].image), выдавая ошибку. мой я нашел где-то, как использовать состояние, как дано gallery: { images: [] }, так что мое состояние, как это. Как я должен использовать карту, чтобы получить все детали, пожалуйста, помогите. заранее спасибо

Answer 1

Если вы хотите иметь все изображения вашего штата, вы можете сделать что-то вроде этого.

Когда вы используете setState, вы можете попробовать setState({...yourJson}), чтобы создать новый объект вашего json в вашем состоянии.

Answer 2

Попробуйте сначала разобрать JSON, как

.then((responseData) => {
  newData = JSON.parse(responseData);
  this.setState({ data: newData });
  this.setState({ ... newData.gallery });
})

Answer 3

Я надеюсь, что вы делаете ошибку, пока setState ваше состояние должно быть как

this.state = { data : {} }

когда вы устанавливаете состояние для componentDidMount или где-либо еще, делайте что-то вроде

this.setState({ data : jsonData )};

после этого вы можете использовать данные в вашем методе рендеринга для рендеринга изображений.

this.state.data.galley.map(item => <Image source={{item.image}/>);

если ваш jsonData является массивом и вы хотите отобразить первый объект массива, сделайте так:

this.state = {data: []};
this.setState({data:jsonData)};
this.state.data[0].galley.map(item => <Image source={{item.image}/>);

если ваш jsonData является массивом и вы хотите отобразить все вложенные изображения, сделайте это следующим образом.

this.state = {data: []};
this.setState({data:jsonData)};
this.state.data.map(data => data.galley.map(item => <Image source={{item.image}/>));