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

Question

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

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

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;

就目前情况而言，我的产品列表在应用程序加载后立即显示在应用程序中。这似乎是一件微不足道的事情，但我一直在绞尽脑汁地试图解决它。

Answer 1

您正在构造函数内调用 this.refresh()。所以它在挂载上运行。

只要从构造函数中删除它就可以了。