react-admin - 如果react-admin中查询字段的长度很短，如何防止发送get请求

Question

我正在使用 react-admin 并尝试创建一个带有自动完成字段的过滤器，该过滤器将在我键入时进行查询，并且仅在搜索条件长度大于 2 时才开始发送查询。

我目前正在使用 shouldRenderSuggestions我的内部 AutocompleteInput字段，但这仍然在“昵称”过滤器中发送两个带有空字符串的请求，这是代码部分:

<AutocompleteInput optionText="nickname" shouldRenderSuggestions={(val) => {
        return val.trim().length > 2
      }}/>

发生的事情是当我填写第一个和第二个字母时 GET请求已发送，但在 nickname 中带有空字符串 field ，

字符串输入例如:"abc":

第一个请求: http://website.loc/clients?filter={"nickname":""}&page=1&perPage=25&range=[0,24]&sort=["id","DESC"]
第二个请求: http://website.loc/clients?filter={"nickname":""}&page=1&perPage=25&range=[0,24]&sort=["id","DESC"]
第 3 次请求: http://website.loc/clients?filter={"nickname":"abc"}&page=1&perPage=25&range=[0,24]&sort=["id","DESC"]
我想避免完全发送前两个请求。

组件的完整代码:

const PostPagination = props => (
  <Pagination rowsPerPageOptions={[]} {...props} />
);

const PostFilter = (props) => (
  <Filter {...props}>
    <ReferenceInput label="Client"
                    source="client_id"
                    reference="clients"
                    allowEmpty
                    filterToQuery={searchText => ({ nickname: searchText })}>
      <AutocompleteInput optionText="nickname" shouldRenderSuggestions={(val) => {
        return val.trim().length > 2
      }}/>
    </ReferenceInput>
  </Filter>
);

const PostsList = props => {
  return (
    <List {...props} perPage={15}
          pagination={<PostPagination/>}
          filters={<PostFilter/>}
          exporter={false}>
      <Datagrid>
        <TextField source="nickname" sortable={false}/>
        <DateField label="Created" source="created_at" showTime/>
      </Datagrid>
    </List>
  );
};

编辑:同样的问题也适用于“输入时搜索”字段，例如 <TextInput> < Filter> 内领域，我开始问一个新问题，但意识到它会有点重复，

这也是从 1 个字符开始发送请求的代码，在这种情况下甚至没有 shouldRenderSuggestions强制它发送空请求的选项

const ClientFilter = (props) => (
  <Filter {...props}>
    <TextInput label="Search" source="str" alwaysOn/>
  </Filter>
);

Live example of code in codesandbox.io

Answer 1

我也偶然发现了这个问题。到目前为止我想出的最好的是一个小的包装组件，它可以防止 ReferenceInput除非满足特定条件，否则不会触发 API 请求:

  const ConditionalFilter = (props) => {
    const { children, condition, setFilter } = props;
    const conditionalSetFilter = (val) => {
      if (setFilter && condition(val)) setFilter(val);
    };
    return React.cloneElement(children, { ...props, setFilter: conditionalSetFilter });
  };

像这样使用:

  const condition = val => val.trim().length > 2;
  return (
    <ReferenceInput 
      source="…"
      reference="…"
      shouldRenderSuggestions={condition}
    >
      <ConditionalFilter condition={condition}>
        <AutocompleteInput />
      </ConditionalFilter>
    </ReferenceInput>
  );

react-admin v3 更新: (没有包装器组件，不再需要/有用)

const condition = (val) => !!val && val.trim().length > 2;
return (
  <ReferenceInput
    source="…"
    reference="…"
    filterToQuery={(val) => (condition(val) ? { name: val.trim() } : {})}
  >
    <AutocompleteInput shouldRenderSuggestions={condition} />
  </ReferenceInput>
);