react select 加载异步选项不加载

Question

我想从后端加载选项。所以我必须从 API 获取数据，然后更新选项。但我不知道该怎么做。有人可以帮忙吗？这是我的代码：

function myComponent() {

  const loadOptions = () => {
    console.log('on load options function')
    axios.get(`/api/admin/roles`)
      .then((response) => {
        const options = []
        response.data.permissions.forEach((permission) => {
          options.push({
            label: permission.name,
            value: permission.id
          })
        })
        return options
      })
  }

  return ( 
    <AsyncSelect 
      isMulti 
      cacheOptions 
      loadOptions={loadOptions}
    />
  )
}

顺便说一句，根本没有任何记录，这意味着 loadOptions 函数不会运行。这是我来自 API 的回复：

response: {
  data: {
    permissions: [{
      id: 13,
      name: 'deposit'
    }, {
      id: 14,
      name: 'withdraw'
    }]
  }
}

Answer 1

AsyncSelect expects a defaultOptions prop，您还没有提供。文档不清楚在这种情况下它应该表现出什么行为，但我猜它默认加载过滤器。

Answer 2

您的loadOptions函数必须return一个承诺。您也可以将 defaultOptions 传递为 true 以使请求触发初始选项集

const loadOptions = () => {
    console.log('on load options function')
    return axios.get(`/api/admin/roles`)
      .then((response) => {
        const options = []
        response.data.permissions.forEach((permission) => {
          options.push({
            label: permission.name,
            value: permission.id
          })
        })
        return options
      })
  }

function myComponent() {
  return ( 
    <AsyncSelect 
      isMulti 
      cacheOptions 
      defaultOptions
      loadOptions={loadOptions}
    />
  )
}

P.S 出于性能原因，您可以在组件外部声明 loadOptions 函数，这样它就不会在每次重新渲染时都重新创建

Answer 3

试试这个

const loadOptions = async () => {
    const response = await axios.get(`/api/admin/roles`)
    const result = await response.data
    return await result.permissions.map((permission) => ({
      label: permission.name,
      value: permission.id
    }))
  }

Answer 4

您遇到的问题似乎是因为您没有在 loadOptions 函数的顶层返回任何内容。

documentation 重点介绍了两种定义 loadOptions 函数的方法。

使用回调：

const loadOptions = (inputValue, callback) => {
  setTimeout(() => {
    callback(options);
  }, 1000);
};

使用承诺：

const loadOptions = inputValue =>
  new Promise(resolve => {
    setTimeout(() => {
      resolve(options);
    }, 1000);
  });

在您的情况下，首先尝试回调选项可能最简单，因为您现有的语法有利于它。

const loadOptions = (inputValue, callback) => {
  console.log('on load options function')
  axios.get(`/api/admin/roles`)
    .then((response) => {
      const options = []
      response.data.permissions.forEach((permission) => {
        options.push({
          label: permission.name,
          value: permission.id
        })
      })
      callback(options);
    })
}

将来您可以选择利用 inputValues 参数向下过滤结果。

react select 加载异步选项不加载

react select load async options does not load

reactjs

react-select