JSON 数据未在 React 中使用搜索框过滤器显示

Question

我有显示在网页上的 JSON 虚拟数据，并带有一个搜索框，可根据输入的关键字过滤数据。以前，在制作filteredJson之前，所有的数据都显示得很好。但是，现在什么都没有显示。怎么了？

最终，我想将数据提交给另一个函数，该函数包含在我单击按钮时呈现表格。考虑到这一点，我应该在onSubmit()里面做什么？

JSON：

let barang = [{
"id" : "001",
"nama_barang" : "bolu kuwuk",
"harga" : 10000,
"gambar" : bolukuwuk},
{
"id" : "002",
"nama_barang" : "bolu kering",
"harga" : 12000,
"gambar" : bolukering

}
];

和班级：

constructor(props) {
    super(props)
    this.state = {
        json: [],
        search: ''
    }
}

componentDidMount() {
    this.setState((prevState) => {
        return {
            json: barang
        }
    })
}

updateSearch(event){
    this.setState({search : event.target.value.substr(0,20)});
}
render() {
    let filteredJson = this.state.json.filter(
        (data) => {
            data.nama_barang.indexOf(this.state.search) !== -1;
        }
    );
    return (
    <div>

    <div className="field has-addons">
        <div className="control">
            <input className="input" type="text" value={this.state.search} onChange={this.updateSearch.bind(this)} placeholder="Cari Barang . . . "/>
        </div>
        <div className="control">
            <a className="button is-info">
            <i className="fa fa-search"></i>
            </a>
        </div>
    </div>

    <section className="products">
    {filteredJson.map((data, i) => {
        return (         
        <div className="product-card" key={i}>
            <div className="product-image">
                <img src={  data.gambar }/>
            </div>
            <div className="product-info">
                <h5>{data.nama_barang}</h5>
                <h6>{data.harga}</h6>
                <p>Masukkan Jumlah yang dibeli : </p><input type="number"/><br/><br/>
                <button className="button is-success btn-product" onClick={this.onSubmit}><i className="fa fa-shopping-cart"></i>&nbsp;&nbsp;Beli</button>&nbsp;&nbsp;

            </div>
        </div>);
        })}  

    </section>


    </div>
    );
}

}

Answer 1

您的.filter 中似乎缺少return 语句：

let filteredJson = this.state.json.filter(
    (data) => {
        return data.nama_barang.indexOf(this.state.search) !== -1;
    }
);

演示：

更新

点击时提交，最好将每个item提取到一个单独的组件中，并使用props：

let barang = [
  {
    id: '001',
    nama_barang: 'bolu kuwuk',
    harga: 10000,
    gambar: 'asdf'
  },
  {
    id: '002',
    nama_barang: 'bolu kering',
    harga: 12000,
    gambar: 'asdf'
  }
];

class Test extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      json: [],
      search: ''
    };
  }

  componentDidMount() {
    this.setState(prevState => {
      return {
        json: barang
      };
    });
  }

  updateSearch = (event) => {
    this.setState({search: event.target.value.substr(0, 20)});
  }
  
  onSubmit = (data) => {
    console.log('submit data', data);
  }

  render() {
    let filteredJson = this.state.json.filter(data => {
      return data.nama_barang.indexOf(this.state.search) !== -1;
    });
    return (
      <div>
        <div className="field has-addons">
          <div className="control">
            <input
              className="input"
              type="text"
              value={this.state.search}
              onChange={this.updateSearch.bind(this)}
              placeholder="Cari Barang . . . "
            />
          </div>
          <div className="control">
            <a className="button is-info">
              <i className="fa fa-search" />
            </a>
          </div>
        </div>

        <section className="products">
          {filteredJson.map((data, i) => {
            return (
              <Product
                key={i}
                data={data}
                onProductClick={this.onSubmit}
              />
            );
          })}
        </section>
      </div>
    );
  }
}

class Product extends React.Component {
  onClick = () => {
    this.props.onProductClick(this.props.data);
  }

  render() {
    const {data} = this.props;
    return (
      <div className="product-card">
        <div className="product-image">
          <img src={data.gambar} />
        </div>
        <div className="product-info">
          <h5>{data.nama_barang}</h5>
          <h6>{data.harga}</h6>
          <p>Masukkan Jumlah yang dibeli : </p>
          <input type="number" />
          <br />
          <br />
          <button className="button is-success btn-product" onClick={this.onClick}>
            <i className="fa fa-shopping-cart" />&nbsp;&nbsp;Beli
          </button>
        </div>
      </div>
    );
  }
}

ReactDOM.render(
  <Test />,
  document.getElementById('app')
);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="app" />

Answer 2

如果你想依赖 ES6 语法，你可以在你的过滤器中得到一个隐式返回，这样写：

const filteredJson = this.state.json.filter(data => data.nama_barang.indexOf(this.state.search) !== -1);

另外，请注意，由于您在分配变量后并未对其进行更改，因此 filteredJson 应该是 const 而不是 let :)