Question

所以问题如下：我有一个搜索函数，从另一个地方传递一个默认值，搜索工作，但只有当它得到一个新的输入，因此，如果我通过“连衣裙”它不会在我改变输入中的内容之前调用我的api函数。

我尝试了一些像 setInitialState（）这样的东西，但没有任何值得注意的成功。

正如您所看到的那样， onTermChange 从搜索栏传递到 handleTermChange ，然后更新我的产品：[]，但我需要 this.props.location.query 作为默认搜索字词，因为这是传递的变量。

  handleTermChange = (term)  => {
    const url = `http://localhost:3001/products?title=${term.replace(/\s/g, '+')}`;
    request.get(url, (err, res) =>  {
       this.setState({ products: res.body })
    });
  };

render () {
    return (
        <div className='col-md-12' style={{ margin: '0 auto' }}>
            <div className='row searchPageHeader' style={{ padding: '10px', backgroundColor: '#1ABC9C' }}/>
            <SideMenu />
            <SearchBar    onTermChange={this.handleTermChange}
                          defaultValue={this.props.location.query}/>
            <ProductList  products={this.state.products}
                          onProductSelect={selectedProduct => this.openModal(selectedProduct)}/>
            <ProductModal modalIsOpen={this.state.modalIsOpen}
                          selectedProduct={this.state.selectedProduct}
                          onRequestClose={ () => this.closeModal() }/>
            <Footer />
        </div>
       );
}

Answer 1

我个人会在componentDidMount()中执行相同的逻辑，如下所示：

componentDidMount () {
  const url = `http://localhost:3001/products?title=${this.props.location.query}`;
  request.get(url, (err, res) =>  {
    this.setState({ products: res.body })
  });
}

请注意，由于您正在进行异步调用，因此在安装组件之后不会从API结果中填充products。确保在products中初始化initialState（我假设这会返回一个数组，因此将其初始化为空数组）。

意见：由于您遵循事件处理程序命名约定（即onX后跟handleX），我将避免在handleTermChange()内调用componentDidMount()因为函数名称表明它绑定到事件监听器。因此，我认为直接调用它只是不好的做法。所以，如果你宁愿在这里调用函数，而不是像我上面那样写出逻辑，我会做以下事情：

componentDidMount() {
  this.changeTerm(this.props.location.query);
}

changeTerm = (term)  => {
  const url = `http://localhost:3001/products?title=${term.replace(/\s/g, '+')}`;
  request.get(url, (err, res) =>  {
    this.setState({ products: res.body })
  });
};

handleTermChange = (term) => {
  this.changeTerm(term);
}

您的render()保持不变。也许是一段时间，但我更喜欢这种方式。

如何在反应ES6中设置初始API调用

1 个答案: