我正在编码一个应用程序,它的目的是显示两个表:一个表包含一个数组中的元素,另一个表包含输入中的暗示另一个数组中的元素的输入。
我不知道如何将来自OldData.json的数据放入我的输入建议中-> const LatestResearches
import React from 'react';
import { Component } from 'react';
import ReactDOM from 'react-dom';
import NewData from '../../api/data/cities.json'
import OldData from '../../api/data/historical.json'
import Pagination from './Pagination.js'
import SuggestionInputSearch from 'suggestion-react-input-search';
react class NewDataTable extends React.Component {
constructor() {
super();
this.state = {
NewData: NewData,
pageOfItems: []
};
this.onChangePage = this.onChangePage.bind(this);
}
onChangePage(pageOfItems) {
// update state with new page of items
this.setState({ pageOfItems: pageOfItems });
}
render() {
const recentSearches = [{OldData.name}];
return (
<div>
<nav><Pagination items={this.state.NewData} onChangePage={this.onChangePage} /></nav>
<table>
<tbody>
<tr>
<th>New Data</th>
<th>Old Data</th>
</tr>
{this.state.pageOfItems.map(item =>
<tr key={item.id}><td key={item.id}>{item.name}</td>
<td><SuggestionInputSearch
recentSearches={recentSearches}
/></td></tr>
)}
</tbody>
</table>
</div>
);
}
}
OldData.json:
[
{
"id": 2900000,
"name": "Randu",
"admin_area": "lomu",
"country": "Portugal"
},
{
"id": 2900001,
"name": "Randu",
"admin_area": "lomu",
"country": "Portugal"
},
{
"id": 2900002,
"name": "Randu",
"admin_area": "lomu",
"country": "Portugal"
},
{
"id": 2900003,
"name": "Isis",
"admin_area": "lomu",
"country": "Portugal"
},
{
"name": "Randu",
"admin_area": "lomu",
"country": "Portugal"
},
{
"id": 2900005,
"name": "Satimola",
"admin_area": "Thuringen",
"country": "Taiwan"
},
...
NewData.json:
[
{
"id": 13610,
"name": "Satimola",
"admin_area": "USA"
},
{
"id": 4129,
"name": "Isis",
"admin_area": "UK"
},
{
"id": 14698,
"name": "Reban",
"admin_area": "Russia"
},
{
"id": 8194,
"name": "Randu",
"admin_area": "USA"
},
{
"id": 18867,
"name": "Randu",
"admin_area": "USA"
},
...