时间戳

首页 > 解决方案 > react-awesome-query-builder 在选择外部单击时为空选择

reactjs - react-awesome-query-builder 在选择外部单击时为空选择

问题描述

我使用 asyncFetch 并从 SelectWiget 中选择值，在外部单击任何值后将此选择设为空值。

我将下一个配置用于字段

 products: {
      type: '!struct',
      label: 'Products',
      subfields: {
        title: {
          type: 'select',
          label: 'Name',
          fieldSettings: {
            asyncFetch: async (search, offset) => {
              const toSearch = _.isEmpty(search) ? 'null' :  search;
              const prodApi = (await axios.get(`http://localhost:8002/api/products/1/${toSearch}?offset=${offset}`, { headers: authHeader() }));
              const productsValues = prodApi.data.data.map(
                product => ({
                  title: product.title,
                  value: product.id
                })
              )

              return {
                values: productsValues,
                hasMore: true,
              }
            },
            useAsyncSearch: true,
            useLoadMore: true,
            forceAsyncSearch: false,
            allowCustomValues: false
          }
        },

另一个错误是当我选择某个值时，再次调用 asyncFetch。

这是该软件包中的错误还是我缺少某些配置？

我使用的包是 react-awesome-query-builder

标签： reactjsquery-builder

解决方案

函数异步结果的值需要是字符串，所以函数如下：

asyncFetch: async (search, offset) => {
          const toSearch = _.isEmpty(search) ? 'null' :  search;
          const prodApi = (await axios.get(`http://localhost:8002/api/products/1/${toSearch}?offset=${offset}`, { headers: authHeader() }));
          const productsValues = prodApi.data.data.map(
            product => ({
              title: product.title,
              value: product.id.toString(),
            })
          )

          return {
            values: productsValues,
            hasMore: true,
          }
        }

推荐阅读