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

Question

所以问题如下：我有一个搜索函数，它获取的是从另一个地方传递的默认值，搜索有效，但只有当它获得新输入时，因此如果我传递“Dress”它不会在我更改输入内容之前调用我的 api 函数。

我已经尝试了 setInitialState() 之类的所有方法，但没有任何显着的成功。

如您所见，我从 Searchbar 获得了一个 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 })
  });
}

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

---

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

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() 保持不变。也许有点牵强，但我更喜欢这种方式。