在 React 中过滤 JSON

Posted 2023-03-10

【中文标题】在 React 中过滤 JSON

【英文标题】：Filtering JSON in React

【发布时间】：2017-01-30 11:15:04

【问题描述】：

我正在使用 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"
   
]

【问题讨论】：

您可以验证帐户是否已填充到控制台中吗？我猜您的 fetch 没有绑定到组件本身

【参考方案1】：

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

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

因为 l.name 是未定义的。您可以再次检查您的 JSON 数据。没有name属性，好像是product。

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

【讨论】：

嗨 Hieu，你说得对，它应该是产品。非常感谢。