在React中过滤JSON

Question

我正在使用FETCH加载一些JSON数据.我正在尝试在显示的内容上添加/创建简单的过滤功能.

我收到这个错误:

未捕获的TypeError:无法读取未定义的属性'toLowerCase'

知道什么可能导致这个错误？

这是我的代码到目前为止:

let Table = React.createClass({
    getInitialState: function(){
        return { 
            accounts: [{
                "product": "Fixed Saver", 
                "interestRate": 2.20,
                "minimumDeposit": 500,
                "interestType": "Fixed"
            }],
            searchString: ''
        }
    },
    componentDidMount: function(){
        fetch('http://localhost:8888/table/json/accounts.json')
            .then(response => {
                return response.json()
            })
            .then(json => {
                this.setState({accounts: json})
            });
    },
    handleChange: function(e){
        this.setState({searchString:e.target.value});
    },
    render: function(){
        var libraries,
        libraries = this.state.accounts,
        searchString = this.state.searchString.trim().toLowerCase();

        if(searchString.length > 0){
            libraries = libraries.filter(l => {
                return l.name.toLowerCase().match( searchString );
            });
        }

        return (
            <div className="container">

            <input type="text" value={this.state.searchString} onChange={this.handleChange} placeholder="Type here" />

                <ul className="header clearfix">
                    <li>Product</li>
                    <li>Interest rate</li>
                    <li>Minimum deposit</li>
                    <li>Interest type</li>
                </ul>

                {libraries.map(l => {
                return (
                    <div className="account clearfix" key={l.id}>
                        <div className="product">{l.product}</div>
                        <div>{l.interestRate} %</div>
                        <div>£ {l.minimumDeposit}</div>
                        <div>{l.interestType}</div>
                    </div>
                    )
                })} 
            </div>
        )
    }
});

let App = React.createClass({
    render: function(){
        return(
            <Table />
        );
    }
});

ReactDOM.render( <App />, document.getElementById('table') );

JSON

[
   {
      "id": 1,
      "product": "Fixed Saver", 
      "interestRate": 2.20,
      "minimumDeposit": 500,
      "interestType": "Fixed"
   },
   {
      "id": 2,
      "product": "Fixed Saver", 
      "interestRate": 1.50,
      "minimumDeposit": 0,
      "interestType": "Tracker"
   },
   {
      "id": 3,
      "product": "Offset Saver", 
      "interestRate": 1.8,
      "minimumDeposit": 1000,
      "interestType": "Fixed"
   }
]

Answer 1

似乎你从这一行得到了错误

libraries = libraries.filter(l => {
  return l.name.toLowerCase().match( searchString );
});

因为l.name未定义.您可以再次检查您的JSON数据.它没有名称属性,好像是产品.

您不应该直接修改您的状态:libraries = libraries.filter ...状态应该由setState函数更新.在这种情况下,您应该创建临时变量来显示结果,而不是直接使用库变量.我相信,如果您的样本有效,您只能第一次搜索,下次搜索结果只会出现在您的上一次搜索结果中.