如何在React中点击显示数据结果？

Question

我只是在单击搜索按钮时尝试显示JSON文件的结果。这样做的正确方法是什么？

现在，当用户键入产品时，显示结果。我有一个简单的过滤器，即过滤结果，但我想只在单击按钮时才显示。我只想在点击搜索按钮时显示结果。

＆＃13;

＆＃13;

class App extends Component {

  constructor(props){
    super(props);
    this.state = { 
      value: '',
      list: []
    }

    this.handleChange = this.handleChange.bind(this);
    this.handleSearch = this.handleSearch.bind(this);

    this.refresh();
  }


  handleChange(event){
    this.setState({ ...this.state, value: event.target.value })
  }
  
  refresh(){
    axios.get(`${URL}`)
      .then(resp => this.setState({...this.state, value: '', list: resp.data}));
  }

  handleSearch(product){
    this.refresh();
  }
  
   render(){
    return(
      <div className="outer-wrapper">
        <Header />
        <main>
          <Container>
            <Row>
              <Col xs={12} md={12} lg={12} className="pl-0 pr-0">
                <SearchBar 
                  handleChange={this.handleChange}
                  handleToggle={this.handleToggle}
                  handleSearch={this.handleSearch}
                  value={this.state.value}
                />
                <SearchResultBar 
                  value={this.state.value}
                />
                <Filter />
              </Col>
            </Row>
            <ProductList 
              value={this.state.value}
              list={this.state.list}
            /> 
          </Container>
        </main>
      </div>
    )
  }
}

export default App;


class Search extends Component {
  constructor(props){
    super(props);
  }

  render(){
    return(
      <div className="search-input">
        <InputGroup>
          <Input placeholder='Enter Search' 
            onChange={this.props.handleChange}
            value={this.props.value}
            />
          <InputGroupAddon className='input-group-append'
            onClick={this.props.handleSearch}>
            <span className='input-group-text'>
              <i className="fa fa-search fa-lg fa-flip-horizontal"></i>
            </span>
          </InputGroupAddon>
        </InputGroup>    
      </div>
    )
  }
}

export default Search;


class ProductList extends Component {
  constructor(props){
    super(props);
    this.state = {
    }
  }


  render(){
    let filteredSearch = this.props.list.filter(
      (product) => {
        return product.title.indexOf(this.props.value) !== -1
      }
    )
    
    return(
      <Container>
        <Row>
          {
            filteredSearch.map(item => {
              return <Product {...item} key={item._id} />
            })
          }
        </Row>
      </Container>
    );
  }
}

export default ProductList;

＆＃13;

＆＃13;

＆＃13;

目前，我的产品列表会在加载后立即显示在应用中。这似乎微不足道，但我一直在努力解决它。

Answer 1

您在构造函数中调用了this.refresh()。所以它在mount上运行。

只需从构造函数中删除它，你就可以了。