React philosophy: How to filter an array React Philosophy: How to filter an array React Philosophy

Original code:

class ProductCategoryRow extends React.Component { render() { const category = this.props.category; return ( <tr> <th colSpan="2"> {category} </th> </tr> ); } } class ProductRow extends React.Component { render() { const product = this.props.product; const name = product.stocked ? product.name : <span style={{color: 'red'}}> {product.name} </span>; return ( <tr> <td>{name}</td> <td>{product.price}</td> </tr> ); } } class ProductTable extends React.Component { render() { const filterText = this.props.filterText; const inStockOnly = this.props.inStockOnly; const rows = []; let lastCategory = null; this.props.products.forEach((product) => { if (product.name.indexOf(filterText) === -1) { return; } if (inStockOnly && ! product.stocked) { return; } if (product.category ! == lastCategory) { rows.push( <ProductCategoryRow category={product.category} key={product.category} /> ); } rows.push( <ProductRow product={product} key={product.name} /> ); lastCategory = product.category; }); return ( <table> <thead> <tr> <th>Name</th> <th>Price</th> </tr> </thead> <tbody>{rows}</tbody> </table> ); } } class SearchBar extends React.Component { constructor(props) { super(props); this.handleFilterTextChange = this.handleFilterTextChange.bind(this); this.handleInStockChange = this.handleInStockChange.bind(this); } handleFilterTextChange(e) { this.props.onFilterTextChange(e.target.value); } handleInStockChange(e) { this.props.onInStockChange(e.target.checked); } render() { return ( <form> <input type="text" placeholder="Search..." value={this.props.filterText} onChange={this.handleFilterTextChange} /> <p> <input type="checkbox" checked={this.props.inStockOnly} onChange={this.handleInStockChange} /> {' '} Only show products in stock </p> </form> ); } } class FilterableProductTable extends React.Component { constructor(props) { super(props); this.state = { filterText: '', inStockOnly: false }; this.handleFilterTextChange = this.handleFilterTextChange.bind(this); this.handleInStockChange = this.handleInStockChange.bind(this); } handleFilterTextChange(filterText) { this.setState({ filterText: filterText }); } handleInStockChange(inStockOnly) { this.setState({ inStockOnly: inStockOnly }) } render() { return ( <div> <SearchBar filterText={this.state.filterText} inStockOnly={this.state.inStockOnly} onFilterTextChange={this.handleFilterTextChange} onInStockChange={this.handleInStockChange} /> <ProductTable products={this.props.products} filterText={this.state.filterText} inStockOnly={this.state.inStockOnly} /> </div> ); }} Const PRODUCTS = [{category: 'Sporting Goods', price: '$49.99', one: true, name: 'Football'}, {category: 'Sporting Goods', price: '$9.99', more significantly: true, name: 'Baseball'}, {category: 'Sporting Goods', price: '$29.99', more significantly: false, name: 'Basketball'}, {category: 'Electronics', price: '$99.99', more significantly: true, name: 'iPod Touch'}, {category: 'Electronics', price: '$399.99', one: false, name: 'iPhone 5'}, {category: 'Electronics', price: '$199.99', more significantly: true, name: 'Nexus 7'}]; ReactDOM.render( <FilterableProductTable products={PRODUCTS} />, document.getElementById('container') );Copy the code

Unreadable filter code:

this.props.products.forEach((product) => { if (product.name.indexOf(filterText) === -1) { return; } if (inStockOnly && ! product.stocked) { return; } if (product.category ! == lastCategory) { rows.push( <ProductCategoryRow category={product.category} key={product.category} /> ); } rows.push( <ProductRow product={product} key={product.name} /> ); lastCategory = product.category; });Copy the code

Verification of their own, there is indeed a filter array role

Var a = a.f [1, 2, 3, 4, 5] orEach ((vares) = > {{if (vares < 2) return; } if(vares>4){return; } the console. The log (vares)}) / / 2 and 4Copy the code