Как добавить один объект к другим всем объектам в ReactJs

У меня есть файл json, вызываемый запросом fetch, который выглядит так:

[
{
    "type": "1",
    "flight": {
        "_id": {
            "value": "eydWZXJzaW9uJzogJzIwMDYuMDEnLCAnVHJhbnNhY3Rpb25JZGVudGlmaWVyJzogJ1RJRCQxNTU3MDMzNTMyNzMzMjQ3NDIzOTUtMS5hYXB1dzU0MycsICdQcmltYXJ5TGFuZ0lEJzogJ2VuLXVzJywgJ0Nvb2tpZXMnOiB7J0pTRVNTSU9OSUQnOiAnODAyQTM2RTdFRjNDNjI4NTlFOUVDQkJBOTc4QTAxRDIuYWFwdXc1NDMnLCAnYWVyb0lEJzogJzkwMDg3MTIxMDE1NTcwMzM1MzIxNTU3MDMzNTMyODI0MDE1J30sICdTZXF1ZW5jZU51bWJlcic6ICcxJywgJ2NsYXNzTmFtZSc6ICdZJywgJ29yZ2luRGVzdGluYXRpb25PcHRpb25zJzogW3snbnMxOkZsaWdodFNlZ21lbnQnOiB7J0BBcnJpdmFsRGF0ZVRpbWUnOiAnMjAxOS0wNS0xNVQwNzoyMDowMCcsICdARGVwYXJ0dXJlRGF0ZVRpbWUnOiAnMjAxOS0wNS0xNVQwNjoyMDowMCcsICdARmxpZ2h0TnVtYmVyJzogJ1c1MTE1MCcsICdASm91cm5leUR1cmF0aW9uJzogJ1BUMUgzME0wLjAwMFMnLCAnQFJQSCc6ICdXNSRJS0EvRVZOJDM3NjI4NCQyMDE5MDUxNTA2MjAwMCQyMDE5MDUxNTA3MjAwMCcsICduczE6RGVwYXJ0dXJlQWlycG9ydCc6IHsnQExvY2F0aW9uQ29kZSc6ICdJS0EnfSwgJ25zMTpBcnJpdmFsQWlycG9ydCc6IHsnQExvY2F0aW9uQ29kZSc6ICdFVk4nfX19LCB7J25zMTpGbGlnaHRTZWdtZW50JzogeydAQXJyaXZhbERhdGVUaW1lJzogJzIwMTktMDUtMTlUMTY6NDU6MDAnLCAnQERlcGFydHVyZURhdGVUaW1lJzogJzIwMTktMDUtMTlUMTQ6NDU6MDAnLCAnQEZsaWdodE51bWJlcic6ICdXNTExNTEnLCAnQEpvdXJuZXlEdXJhdGlvbic6ICdQVDFIMzBNMC4wMDBTJywgJ0BSUEgnOiAnVzUkRVZOL0lLQSQzNzY1MDMkMjAxOTA1MTkxNDQ1MDAkMjAxOTA1MTkxNjQ1MDAnLCAnbnMxOkRlcGFydHVyZUFpcnBvcnQnOiB7J0BMb2NhdGlvbkNvZGUnOiAnRVZOJ30sICduczE6QXJyaXZhbEFpcnBvcnQnOiB7J0BMb2NhdGlvbkNvZGUnOiAnSUtBJ319fV0sICdwYXNzZW5nZXJfdGF4JzogeydpbmZhbnRzJzogMCwgJ2NoaWxkcyc6IDAsICdhZHVsdHMnOiA3MDE4MDAwLjB9LCAndG90YWxfdGF4JzogNzAxODAwMC4wLCAndG90YWxfd2l0aG91dF90YXgnOiAxNTE3ODAwMC4wLCAnY3VycmVuY3knOiAnSVJSJ30 = ",
            "provider": {
                "provider_id": "2",
                "dmnid": "3984-5cb59eca68f75451df7f828f"
            }
        },
        "info": {
            "departureinformation": {
                "routeshow": {
                    "dateinfo": [
                        {
                            "startdeparture": [
                                {
                                    "_id": 10648.0,
                                    "sstring": "1398-02-25",
                                    "mstring": "2019-05-15",
                                    "weekday": "4"
                                }
                            ],
                            "enddeparture": [
                                {
                                    "_id": 10648.0,
                                    "sstring": "1398-02-25",
                                    "mstring": "2019-05-15",
                                    "weekday": "4"
                                }
                            ]
                        }
                    ]
                }
            }
        },
        "total": 21361210.0,
        "totalCom": 21361210.0,
        "commissioncost": 0.0
    }
},
{
    "type": "2",
    "id": {
        "hotelId": "105254",
        "provider": {
            "provider_id": "23",
            "dmnid": 3984.0
        }
    },
    "hotelinfo": {
        "name": "CVK Park Bosphorus Hotel",
        "hotelsearch": {
            "realname": "CVK Park Bosphorus Hotel",
            "hotelid": 0.0,
            "hotelimage": "",
            "star": 5.0
        }
    }
},
{
    "type": "2",
    "id": {
        "hotelId": "105256",
        "provider": {
            "provider_id": "23",
            "dmnid": 3984.0
        }
    },
    "hotelinfo": {
        "name": "CVK  Hotel",
        "hotelsearch": {
            "realname": "CVK  Hotel",
            "hotelid": 0.0,
            "hotelimage": "",
            "star": 5.0
        }
    }
},
{
    "type": "2",
    "id": {
        "hotelId": "105252",
        "provider": {
            "provider_id": "23",
            "dmnid": 3984.0
        }
    },
    "hotelinfo": {
        "name": "Bosphorus Hotel",
        "hotelsearch": {
            "realname": "Bosphorus Hotel",
            "hotelid": 0.0,
            "hotelimage": "",
            "star": 5.0
        }
    }
}
]

Как видите, у каждого объекта json есть поле с именем type. Например, если бы было 100 объектов, 99 объектов имели бы поле type со значением 2, а 1 объект имел бы поле type со значением 1. Я хочу, чтобы объект от type=1 был добавлен ко всем объектам от type=2.

 class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
        data: [],
        library: null,
        perPage: 20,
        currentPage: 1,
        maxPage: null,

    }
}
componentDidMount() {
    fetch('/json.bc', {
        method: 'get',
    })
        .then(response => response.text())
        .then(text => {
            let Maindata = JSON.parse(text.replace(/\'/g, '"'))
            this.setState(state => ({
                ...state,
                data: Maindata
            }), () => {
                this.reorganiseLibrary()
            })
        }).catch(error => console.error(error))

}

reorganiseLibrary = () => {
    const { perPage, data } = this.state;
    let library = data;
    library = _.chunk(library, perPage);
    this.setState({
        library,
        currentPage: 1,
        maxPage: library.length === 0 ? 1 : library.length
    })
}



// Previous Page
previousPage = event => {
    this.setState({
        currentPage: this.state.currentPage - 1
    })
}
// Next Page 
nextPage = event => {
    this.setState({
        currentPage: this.state.currentPage + 1
    })
}

// handle per page
handlePerPage = (evt) =>
    this.setState({
        perPage: evt.target.value
    }, () => this.reorganiseLibrary());

// handle render of library
renderLibrary = () => {
    const { library, currentPage } = this.state;
    if (!library || (library && library.length === 0)) {
        return <div>NOResult</div>
    }
    return library[currentPage - 1].map((item, i) => (
        <div className = "Wrapper">{this.rendermain(item, i)}</div>
    ))
}



render() {
    const { library, currentPage, perPage, maxPage } = this.state;
    return (
        <div>
            {this.renderLibrary()}
            <ul id = "page-numbers">
                <li className = "nexprevPage">
                    {currentPage !== 1 && (
                        <button onClick = {this.previousPage}><span className = "fa-backward"></span></button>
                    )}
                </li>
                <li className = "controlsPage activeCnt">{this.state.currentPage}</li>
                <li className = "restControls">...</li>
                <li className = "controlsPage">{this.state.maxPage}</li>
                <li className = "nexprevPage">
                    {(currentPage < maxPage) && (
                        <button onClick = {this.nextPage}><span className = "fa-forward"></span></button>
                    )}
                </li>
            </ul>
        </div>
    )
}
rendermain(element, i) {
    let type = element.type
    let saveProduct = ""
    let productToBeAdded = ""
    if (type == '2') {
        saveProduct = <div className = "box-hotel">{element.hotelinfo.name}</div>
    }
    if (type == '1') {
        productToBeAdded = <div className = "box-flight"><img src = {element.flight.info.departureinformation.ticketinfooo.showstartairline} width = "100" height = "40" alt = "" /> </div>
    }

    let final = saveProduct.push(productToBeAdded)
    console.info(final)
    return final
}
}
ReactDOM.render(<App />, document.getElementById('Result'))

Я пытался использовать push, но была эта ошибка: saveProduct.push is not a function

Сначала найдите объект с типом 1 и добавьте его к объекту с типом 2. Вот так: repl.it/repls/FloweryVagueApplications

— 21.05.2019 08:10

reactjs

21.05.2019 07:46

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией

В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.

Концепция локализации и ее применение в приложениях React ⚡️

Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Массив зависимостей в React

Все о массиве Dependency и его связи с useEffect.

Компонент против элемента в ReactJS - секрет оптимизации производительности за счет повторного использования элементов

Проще говоря, компонент - это фабрика для создания элементов.

Руководство по использованию хука useEffect для методов жизненного цикла React

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Сначала получите объект с помощью "type": "1"

const type1 = data.find(({ type }) => type === '1');

Затем выполните цикл data, и если идентификатор равен "1", верните его, иначе объедините type1 с текущим объектом.

const mergedData = data.map(obj => obj.type === '1' ? obj : { ...type1, ...obj });

Изменить componentDidMount на это

componentDidMount() {
  fetch('/json.bc')
    .then(response => response.json())
    .then(data => {
      const type1 = data.find(({ type }) => type === '1');
      const mergedData = data.map(obj => obj.type === '1' ? obj : { ...type1, ...obj });

      this.setState(state => ({
        ...state,
        data: mergedData,
      }), this.reorganiseLibrary);
    }).catch(console.error);
}

Спасибо @Asaf Aviv за ваш ответ. Извините, но не могли бы вы показать это в моем коде? Я почти понял, что вы имеете в виду, но я не знаю, как использовать это в моем коде.

— 21.05.2019 08:16

Обновлен ответ, проверьте его и дайте мне знать

— 21.05.2019 08:24

Спасибо @Asaf Aviv, но похоже, что объекты не будут объединены. когда я пишу console.info(mergedData), он показывает мне json по умолчанию без объединения типов = 1 по типу = 2. и когда я пишу: return library[currentPage - 1].map((item, i) => ( {item.hotelinfo.name} )) в ответ, будет эта ошибка: item.hotelinfo is undefined

— 21.05.2019 08:42

21.05.2019 08:08