Question

我有一个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的{{1}}字段，而1个对象将具有值为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.log(final) return final } } ReactDOM.render(<App />, document.getElementById('Result'))

Answer 1

首先使用"type": "1"

获取对象

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

然后遍历data，如果id是"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);
}

如何在ReactJs中将一个对象添加到其他所有对象

1 个答案: