Question

我需要根据下拉菜单中的所选选项显示不同的数据。我正在使用Query组件查询值，并且每个选项的值都不同。这是它的示例代码。

 <Query query={CURRENT_USER}>
     {({loading, error, data}) => {
         if (loading) 
             return "loading...";
         if (error) 
             return `Error! ${error.message}`;
         return  <h1>{data.month === Date().slice(4,7).toLowerCase() ? data.amount : 0}</h1>
      }}
 </Query>
 <div>
     <select defaultValue={Date().slice(4,7).toLowerCase()}>
         <option value="jan">JAN</option>
         <option value="feb">FEB</option>
         <option value="mar">MAR</option>
         <option value="apr">APR</option>
         <option value="jun">JUN</option>
         <option value="jul">JUL</option>
         <option value="aug">AUG</option>
         <option value="sep">SEPT</option>
         <option value="oct">OCT</option>
         <option value="nov">NOV</option>
         <option value="dec">DEC</option>
     </select>
 </div>

Answer 1

查询组件返回element.onmouseup = function(event) { event.preventDefault(); var st = this.scrollTop; setTimeout(function () { element.scrollTop = st; }, 0); };，可以将其传递给表单中的refetch函数。它像原始查询一样接受变量。

它看起来像这样：

onChange

Answer 2

尽管可以，但对于此典型用例，不必使用refetch。您只需执行普通的setState。 Apollo将看到变量已更改，并自动重新获取查询。如果您有一个需要更改的嵌套组件，并且没有深入研究调用setState的onChange处理程序（以及其他原因），通常会使用refetch。

还要指出，您需要在onChange处理程序中调用setState，以便选择下拉列表会更新。因此，即使您在下面添加了refetch，查询也会不必要地第二次获取。

<Query query={CURRENT_USER} variables={{ month: this.state.month }}>
  <select
    value={this.state.month}
    onChange={event => this.setState({ month: event.target.value })}
  >

Apollo React：从选择下拉列表中选择其他选项时，如何重新查询？

2 个答案: