在 React 中过滤 JSON

Question

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

我收到此错误：

未捕获的类型错误：无法读取未定义的属性“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 数据。没有name属性，好像是product。

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