Question

我想从json显示地区的显示列表，收到以下错误 'TypeError：proposalion.districts.slice（...）。toLowerCase不是函数' json文件。

如何获取地区详细信息列表，以便可以使用降档执行自动完成功能？

任何帮助表示赞赏。

json格式

{  
    "states":[  
       {  
          "state":"Andhra Pradesh",
          "districts":[  
             "Anantapur",
             "Chittoor",
             "East Godavari",
          ]
       },
       {  
          "state":"Arunachal Pradesh",
          "districts":[  
             "Tawang",
             "West Kameng",
             "East Kameng",
           ]
       },
}

组件

import React, { Component } from 'react'
import statedist from "./StateDistrict.json";

const suggestions = statedist.states;

/*.... */

function getSuggestions(value, { showEmpty = false } = {}) {
   // const StatesSelected=props.StatesSelected;
    const inputValue = deburr(value.trim()).toLowerCase();
    const inputLength = inputValue.length;
    let count = 0;
//console.log(StatesSelected)
    return inputLength === 0 && !showEmpty
        ? []
        : suggestions.filter(suggestion => {
            const keep =
                count < 5 &&
                suggestion.districts.slice(0, inputLength).toLowerCase() === inputValue;

            if (keep) {
                count += 1;
            }

            return keep;
        });
}
function renderSuggestion(suggestionProps) {
    const {
        suggestion,
        index,
        itemProps,
        highlightedIndex,
        selectedItem
    } = suggestionProps;
    const isHighlighted = highlightedIndex === index;
    const isSelected = (selectedItem || "").indexOf(suggestion.districts) > -1;

    return (
        <MenuItem
            {...itemProps}
            key={suggestion.districts[0]}
            selected={isHighlighted}
            component="div"
            style={{
                fontWeight: isSelected ? 500 : 400
            }}
        >
            {suggestion.districts[0]} -- how can I get all the values instead of one here
        </MenuItem>
    );
}
class autoCompleteState extends Component {
    constructor(props) {
        super(props);
        this.state = {
            SelectedState:'',
        }
       // this.showProfile = this.showProfile.bind(this)
    }
    setSelectedDistrict = (newState) => {
        this.setState({ SelectedState: newState });
        console.log(newState)
        this.props.onDistrictSelected(newState);         
   }
    render() {
        const { classes, } = this.props;
        console.log(this.state.SelectedState)
        const StatesSelected=this.props.StateList;
        return (
            <div>
                <DownshiftMultiple 
                    classes={classes} 
                    setSelectedDistrict={this.setSelectedDistrict} 
                    StatesSelected={StatesSelected}
                />
            </div>
        )
    }
}
export default withStyles(Styles)(autoCompleteState);

我希望像下面图像中的状态一样建议地区详细信息

Answer 1

当前，您正在执行此操作：

suggestion.districts.slice(0, inputLength).toLowerCase() === inputValue;

这引发了错误，因为.slice正在从inputLength数组中复制districts个项目，然后尝试在该数组上调用.toLowerCase()。

如果我的理解正确，则您正在尝试根据inputValue过滤地区。一种实现方法是在地区数组中使用reduce，如下所示：

suggestion.districts.reduce((acc,curr)=>curr.substring(0,inputLength)===inputValue?[...acc,curr.substring(0,inputLength)]:acc, [])

如果只想要前5个，则可以对结果进行切片：

suggestion.districts.reduce((acc,curr,index)=>index<5&&curr.substring(0,inputLength)===inputValue?[...acc,curr.substring(0,inputLength)]:acc, [])

状态区json绑定反应

1 个答案: