Reactjs 将Json文件中的值指定给select

我想给我的建议者一个Json文件中的值。这些值的名称显示在我的select中，但当我返回一个alert（）时，我的值显示为“null”。 我想将已在选择中显示/可见的名称用作值

我的应用程序的目的是在有人在select中选择一个名称后，显示两个数据库中具有相同名称的所有数据

这是两个JSON文件的结构，它们都有不同的id、名称、管理区域和国家/地区值

  {
    "id": 3,
    "name": "Satimola",
    "admin_area": "Theo",
    "country": "Taiwan"
  }

当然，我尝试将array suggestionOldData作为值传递，但没有成功控制台说：

失败的道具类型：提供给

建议者的
数组类型的无效道具
值
，应为
字符串

import React from "react";
import { Component } from "react";
import ReactDOM from "react-dom";
// IMPORT DATA FROM  JSON FILE
import NewData from "../../api/data/cities.json";
import OldData from "../../api/data/historical.json";
// IMPORT PAGINATION FILE
import Pagination from "./Pagination.js";
// IMPORT MODULE TO CREATE INPUT SEARCH
import Suggestor from "ssuggestor";

// CREATE A COMPONENT THAT WILL SHOW THE NEW DATA IN A TABLE
class NewDataTable extends React.Component {
  constructor() {
    super();

    this.state = {
      NewData: NewData,
      pageOfItems: []
    };

    this.onChangePage = this.onChangePage.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  onChangePage(pageOfItems) {
    // update state with new page of items
    this.setState({ pageOfItems: pageOfItems });
  }

  // GET INPUT VALUE , GET DATA WITH THE SAME NAME IN BOTH ARRAY, CONSOLE.LOG BOTH
  handleChange(event) {
    var val = document.getElementById(Suggestor);
    alert(val);
    const consoleOldData = OldData.find(value => value.name);
    const consoleNewData = NewData.find(value => value.name);
    console.log("Old Data =>", consoleOldData);
    console.log("New Data =>", consoleNewData);
  }

  render() {
    // GET DATA.NAME FROM OldData
    const suggesttionOldData = OldData.map(value => value.name);

    return (
      <div>
        <form>
          <Suggestor
            id="Suggestor"
            list={suggesttionOldData}
            onSelect={this.handleChange}
            placeholder="  ..."
            value={this.state.value}
          />
        </form>

        <nav>
          <Pagination
            items={this.state.NewData}
            onChangePage={this.onChangePage}
          />
        </nav>
        <table>
          <tbody>
            <tr>
              <th>New Data</th>
            </tr>

            {this.state.pageOfItems.map(item => (
              <tr key={item.id}>
                <td key={item.id}>{item.name}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    );
  }
}

export default NewDataTable;


从“React”导入React；
从“react”导入{Component}；
从“react dom”导入react dom；
//从JSON文件导入数据
从“../../api/data/cities.json”导入新数据；
从“../../api/data/historical.json”导入旧数据；
//导入分页文件
从“/Pagination.js”导入分页；
//导入模块以创建输入搜索
从“ssuggestor”导入建议器；
//创建将在表中显示新数据的组件
类NewDataTable扩展了React.Component{
构造函数（）{
超级（）；
此.state={
NewData:NewData，
pageOfItems:[]
};
this.onChangePage=this.onChangePage.bind（this）；
this.handleChange=this.handleChange.bind（this）；
}
onChangePage（pageOfItems）{
//使用项目的新页面更新状态
this.setState（{pageOfItems:pageOfItems}）；
}
//获取输入值，获取两个数组中同名的数据，CONSOLE.LOG
手变（活动）{
var val=document.getElementById（建议者）；
警报（val）；
const consoleOldData=OldData.find（value=>value.name）；
const consoleNewData=NewData.find（value=>value.name）；
log（“旧数据=>”，consoleOldData）；
log（“新数据=>”，consoleNewData）；
}
render（）{
//从OldData获取DATA.NAME
const suggestionolddata=OldData.map（value=>value.name）；
返回(
新数据
{this.state.pageOfItems.map（项=>(
{item.name}
))}
);
}
}
导出默认的NewDataTable；

这是Suggester类





class Suggestor extends PureComponent {
    constructor(props) {
        super(props);
        autoBind(this);

        this.input = React.createRef();

        this.state = {
            filtered: this.filter(props.list, props.value, false),
            value: props.value,
            open: false,
            index: 0
        };
    }
    componentDidMount() {
        document.addEventListener('click', this._onClick);
    }
    componentWillUnmount() {
        document.removeEventListener('click', this._onClick);
    }
    _onClick(event) {
        if (!this.input.current.parentNode.contains(event.target)) {
            this.close();
        }
    }
    componentWillReceiveProps(nextProps) {
        let value = this.state.value;

        if (nextProps.value !== this.props.value && nextProps.value !== value) {
            value = nextProps.value;
        }

        this.setState({
            filtered: this.filter(nextProps.list, value, true),
            value
        });
    }
    close() {
        this.setState({
            open: false,
            filtered: this.unfilter(),
            index: 0
        });
    }
    handleClick() {
        if (this.props.openOnClick) {
            if (this.state.open) {
                this.close();
            } else {
                this.setState({ open: true, filtered: this.unfilter() });
            }
        }
    }
    handleKeyDown(e) {
        const { onKey, useKeys } = this.props;
        onKey(e);

        if (useKeys && this.processKey(e.keyCode)) {
            e.preventDefault();
        }
    }
    processKey(code) {
        const { open, index, filtered, value } = this.state;
        const ssuggestions = filtered.length ? filtered : this.unfilter();
        let nextIndex;

        switch (code) {
            case keys.ENTER:
                if (open && filtered[index]) {
                    this.changeValue(filtered[index].word, true);
                } else {
                    this.setState({ open: true, filtered: this.unfilter() });
                }
                break;
            case keys.ESCAPE:
                this.close();
                if (!open && value) {
                    this.changeValue('');
                }
                break;
            case keys.DOWN:
                nextIndex = (index + open) % ssuggestions.length;
                break;
            case keys.UP:
                nextIndex = (index || ssuggestions.length) - 1;
                break;
            case keys.TAB:
                if (this.props.selectOnTab && open && filtered[index]) {
                    this.changeValue(filtered[index].word, true);
                } else {
                    this.close();
                }
            default:
                return false;
        }

        if (nextIndex !== undefined) {
            this.setState({ open: true, index: nextIndex, filtered: ssuggestions });
        }

        return true;
    }
    handleItemClick({ word }) {
        this.changeValue(word, true);
    }
    handleItemMouseEnter(index) {
        this.setState({ index });
    }
    handleChange(e) {
        e.stopPropagation();
        const value = e.target.value;
        this.changeValue(value);
    }
    remove() {
        this.changeValue('', true);
    }
    changeValue(value, select = false) {
        const { list, suggestOn, accents, onChange, onSelect } = this.props;
        const filtered = this.filter(list, value);
        const suggest = value.length >= suggestOn;
        const open = !!filtered.length && suggest;

        this.setState({ value, filtered, open }, () => {
            onChange(value);
            if (select) {
                const suggestion = filtered.find(({ word }) => transform(accents, word) === transform(accents, value));
                onSelect(value, suggestion && suggestion.item);
                this.close();
            }
        });
    }
    filter(list, value, onlyMatch = true) {
        const { accents, selector } = this.props;
        value = transform(accents, value);

        let mapped = list.map(item => {
            const word = selector(item);
            return {
                index: transform(accents, word).indexOf(value),
                word,
                item
            };
        });
        if (onlyMatch) {
            mapped = mapped.filter(item => item.index !== -1);
        }
        return mapped;
    }
    unfilter() {
        return this.filter(this.props.list, this.state.value, false);
    }
    focus() {
        this.input.current.focus();
    }
    render() {
        const { theme, style, placeholder, arrow, close, tooltip, required } = this.props;
        const { open, value, index, filtered } = this.state;
        const displaySuggestions = open && !!filtered.length;

        return (
            <div className={theme.root} onClick={this.handleClick} onKeyDown={this.handleKeyDown} style={style}>
                <input
                    type="text"
                    className={theme.input}
                    onChange={this.handleChange}
                    value={value}
                    title={tooltip}
                    placeholder={placeholder}
                    required={required}
                    ref={this.input}
                />
                {arrow && <span className={theme.arrow} />}
                {close && value && <span className={theme.close} onClick={this.remove} />}
                {displaySuggestions && (
                    <ul className={theme.list}>
                        {filtered.map((item, i) => (
                            <ListItem
                                key={item.word}
                                theme={theme}
                                item={item}
                                index={i}
                                onItemClick={this.handleItemClick}
                                onItemMouseEnter={this.handleItemMouseEnter}
                                overItem={i === index}
                                search={value}
                            />
                        ))}
                    </ul>
                )}
            </div>
        );
    }
}

Suggestor.propTypes = {
    list: PropTypes.arrayOf(PropTypes.oneOfType([PropTypes.string, PropTypes.object])).isRequired,
    selector: PropTypes.func,
    onChange: PropTypes.func,
    onSelect: PropTypes.func,
    onKey: PropTypes.func,
    value: PropTypes.string,
    openOnClick: PropTypes.bool,
    selectOnTab: PropTypes.bool,
    placeholder: PropTypes.string,
    tooltip: PropTypes.string,
    theme: PropTypes.shape({
        root: PropTypes.string,
        arrow: PropTypes.string,
        close: PropTypes.string,
        list: PropTypes.string,
        item: PropTypes.string,
        activeItem: PropTypes.string
    }),
    suggestOn: PropTypes.number,
    style: PropTypes.object,
    required: PropTypes.bool,
    useKeys: PropTypes.bool,
    accents: PropTypes.bool,
    arrow: PropTypes.bool,
    close: PropTypes.bool
};

Suggestor.defaultProps = {
    theme: {},
    selector: s => s,
    onSelect: noop,
    onChange: noop,
    onKey: noop,
    value: '',
    openOnClick: true,
    selectOnTab: false,
    suggestOn: 1,
    required: false,
    accents: false,
    useKeys: true,
    arrow: true,
    close: true
};

export default Suggestor;



类建议器扩展了PureComponent{
建造师（道具）{
超级（道具）；
自动绑定（本）；
this.input=React.createRef（）；
此.state={
过滤：此.filter（props.list、props.value、false），
价值：道具价值，
开：错，
索引：0
};
}
componentDidMount（）{
document.addEventListener（'点击'，点击此按钮）；
}
组件将卸载（）{
document.removeEventListener（'单击'，此按钮。_onClick）；
}
_onClick（事件）{
如果（！this.input.current.parentNode.contains（event.target））{
这个。关闭（）；
}
}
组件将接收道具（下一步）{
让value=this.state.value；
if（nextrops.value！==this.props.value&&nextrops.value！==value）{
value=nextrops.value；
}
这是我的国家({
过滤：this.filter（nextrops.list，value，true），
价值
});
}
关闭（）{
这是我的国家({
开：错，
已筛选：this.unfilter（），
索引：0
});
}
handleClick（）{
if（this.props.openOnClick）{
if（this.state.open）{
这个。关闭（）；
}否则{
this.setState（{open:true，filtered:this.unfilter（）}）；
}
}
}
handleKeyDown（e）{
const{onKey，useKeys}=this.props；
安基（e）；
if（useKeys&&this.processKey（e.keyCode））{
e、 预防默认值（）；
}
}
processKey（代码）{
const{open，index，filtered，value}=this.state；
const-ssuggestions=filtered.length？filtered:this.unfilter（）；
让nextIndex；
开关（代码）{
case key.ENTER：
如果（打开并筛选[索引]）{
this.changeValue（过滤的[index].word，true）；
}否则{
this.setState（{open:true，filtered:this.unfilter（）}）；
}
打破
case key.ESCAPE：
这个。关闭（）；
如果（！打开&值）{
此参数为.changeValue（“”）；
}
打破
case key.DOWN：
nextIndex=（索引+打开）%ssuggestions.length；
打破
case key.UP：
nextIndex=（索引| | ssuggestions.length）-1；
打破
case key.TAB：
if（this.props.selectOnTab&&open&&filtered[index]）{
this.changeValue（过滤的[index].word，true）；
}否则{
这个。关闭（）；
}
违约：
返回false；
}
if（nextIndex！==未定义）{
setState（{open:true，index:nextIndex，filtered:ssuggestions}）；
}
返回true；
}
handleItemClick（{word}）{
此.changeValue（字，真）；
}
handleItemMouseEnter（索引）{
this.setState（{index}）；
}
手变（e）{
e、 停止传播（）；
常量值=e.target.value；
这个.changeValue（值）；
}
删除（）{
此.changeValue（“”，true）；
}
changeValue（值，选择=false）{
const{list，suggestOn，accents，onChange，onSelect}=this.props；
const filtered=this.filter（列表，值）；
康斯特建议
<Suggestor
    id;= "Suggestor";
    list = {suggesttionOldData};
    onSelect = {this.onSuggesterSelect};
    placeholder ='  ...'
    value = {this.state.value}
/ >

// GET INPUT VALUE , GET DATA WITH THE SAME NAME IN BOTH ARRAY, CONSOLE.LOG BOTH
onSuggesterSelect(value, suggestion) {
    const val = value; // this should be your selected value (name) now.
    alert(val);
    const consoleOldData = OldData.find(value => value.name);
    const consoleNewData = NewData.find(value => value.name);
    console.log('Old Data =>', consoleOldData);
    console.log('New Data =>', consoleNewData);
}


import React from "react";
import { Component } from "react";
import ReactDOM from "react-dom";
// IMPORT DATA FROM  JSON FILE
import NewData from "../../api/data/cities.json";
import OldData from "../../api/data/historical.json";
// IMPORT PAGINATION FILE
import Pagination from "./Pagination.js";
// IMPORT MODULE TO CREATE INPUT SEARCH
import Suggestor from "ssuggestor";

// CREATE A COMPONENT THAT WILL SHOW THE NEW DATA IN A TABLE
class NewDataTable extends React.Component {
  constructor() {
    super();

    this.state = {
      NewData: NewData,
      pageOfItems: []
    };

    this.onChangePage = this.onChangePage.bind(this);
    this.handleChange = this.handleChange.bind(this);
  }

  onChangePage(pageOfItems) {
    // update state with new page of items
    this.setState({ pageOfItems: pageOfItems });
  }

  // GET INPUT VALUE , GET DATA WITH THE SAME NAME IN BOTH ARRAY, CONSOLE.LOG BOTH
  handleChange(event) {
    var val = document.getElementById(Suggestor);
    alert(val);
    const consoleOldData = OldData.find(value => value.name);
    const consoleNewData = NewData.find(value => value.name);
    console.log("Old Data =>", consoleOldData);
    console.log("New Data =>", consoleNewData);
  }

  onSuggesterSelect(value, suggestion) {
    const val = value; // this should be your selected value (name) now.
    alert(val);
    const consoleOldData = OldData.find(value => value.name);
    const consoleNewData = NewData.find(value => value.name);
    console.log('Old Data =>', consoleOldData);
    console.log('New Data =>', consoleNewData);
  }

  render() {
    // GET DATA.NAME FROM OldData
    const suggesttionOldData = OldData.map(value => value.name);

    return (
      <div>
        <form>
          <Suggestor
            id="Suggestor"
            list={suggesttionOldData}
            onSelect={this.onSuggesterSelect}
            placeholder="  ..."
            value={this.state.value}
          />
        </form>

        <nav>
          <Pagination
            items={this.state.NewData}
            onChangePage={this.onChangePage}
          />
        </nav>
        <table>
          <tbody>
            <tr>
              <th>New Data</th>
            </tr>

            {this.state.pageOfItems.map(item => (
              <tr key={item.id}>
                <td key={item.id}>{item.name}</td>
              </tr>
            ))}
          </tbody>
        </table>
      </div>
    );
  }
}

export default NewDataTable;