如何将aray中的元素放入输入中

时间:2019-09-08 18:14:08

标签: reactjs

我正在编码一个应用程序,它的目的是显示两个表:一个表包含一个数组中的元素,另一个表包含输入中的暗示另一个数组中的元素的输入。

我不知道如何将来自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"
  },
...

0 个答案:

没有答案