如果react-admin中查询字段的长度很短，如何防止发送get请求 [英] How to prevent get request from being send if the length of the query field is short in react-admin

问题描述

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

I'm using react-admin and trying to create a filter with autocomplete field that will make a query as I type and will only start sending the query when the search criteria length is longer then 2.

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

I'm currently using shouldRenderSuggestions inside of my AutocompleteInput field but this still send two requests with an empty string in the "nickname" filter, this is the code part:

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

发生的事情是，当我填写第一个和第二个字母时，GET 请求被发送，但 nickname 字段中的字符串为空，

The thing that happens is when I fill in the first and second letters the GET request is sent but with an empty string in the nickname field,

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

The string input is for example:"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"]

第三次请求:http://website.loc/clients?filter={"nickname":"abc"}&page=1&perPage=25&range=[0,24]&sort=["id","DESC"]

我想避免完全发送前两个请求.

I want to avoid from sending the first two requests entirely.

组件的完整代码:

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>
  );
};

同样的问题适用于 内的search-as-you-type"字段，例如 Filter>> 领域，我开始问一个新问题，但意识到它会有点重复，

same question goes for "search-as-you-type" fields like <TextInput> inside a <Filter> field, I started to ask a new question but realized it will be kind of a duplicate,

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

This is the code that also sends requests starting from 1 char, in this case there isn't even a shouldRenderSuggestions option to force it to send empty requests

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

codesandbox.io 中的代码示例

推荐答案

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

I stumbled upon this issue, too. The best I've come up with so far is a small wrapper component that prevents the ReferenceInput from triggering API requests unless a certain condition is met:

  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 的更新:(没有包装器组件，不再需要/有用)

Update for react-admin v3: (without the wrapper component, which is no longer necessary/useful)

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

这篇关于如果react-admin中查询字段的长度很短，如何防止发送get请求的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！