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函数更新状态。在这种情况下，您应该创建临时变量来显示结果，而不是直接使用库变量。我相信如果您的样本有效，您只能第一次搜索，下次搜索结果只会出现在您的上一次搜索结果中。

在React中过滤JSON

1 个答案: