未处理的拒绝（TypeError）：无法读取未定义的属性“过滤器”

Question

我正在尝试在 react.js 中过滤搜索我的 API 数据，但出现此错误，无法读取未定义的属性“过滤器”。这是我的 JSON 数据链接：https://alert-amigo-api.herokuapp.com/products/ 由于 JSON 数据返回一个对象数组，因此我在 props 中声明并使用了相同的对象。有什么问题？

    import FilterResults from 'react-filter-search';
    import React, { Component } from "react";
    class UserProfile extends Component {
    constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoaded: false,
      products: [],
      value: ''
    };
  }
  componentWillMount() {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => response.json())
      .then(
        (result) => {
          this.setState({
            isLoaded: true,
            products: result.products
          });
        },
        // Note: it's important to handle errors here
        // instead of a catch() block so that we don't swallow
        // exceptions from actual bugs in components.
        (error) => {
          this.setState({
            isLoaded: true,
            error
          });
        }
      )
      console.log(this.state.products[0]);
  }
  handleChange = event => {
    const { value } = event.target;
    this.setState({ value });
  };
  render() {
    const { error, isLoaded, products, value } = this.state;
    if (error) {
      return <div>Error: {error.message}</div>;
    } else if (!isLoaded) {
      return <div>Loading...</div>;
      } else {
    return (
      <div className="content-margin">
        <input type="text" value={value} onChange={this.handleChange} />
        <FilterResults
          value={value}
          products={products}
          renderResults={products => (
            <div>
              {products.map(el => (
                 <div>
                  <span>{el.productName}</span>
                 </div>
               ))}
             </div>
           )}
         />
       </div>
      );
    }
  }
}
export default UserProfile;

Answer 1

通过测试该确切示例，您会注意到获取 URL 不返回产品：

fetch('https://jsonplaceholder.typicode.com/users')

网址应该是：

fetch('https://alert-amigo-api.herokuapp.com/products/')

现在result.products 确实包含一个数组。我建议稍微对您的代码进行防弹：

    (result) => {
      this.setState({
        isLoaded: true,
        products: result.products || [] // <-- add empty array
      });

或者，如果您愿意，在渲染方法上：

render() {

  { products &&
    <FilterResults ... />
  }

}