Question

我正在尝试通过react-select进行Async的第一次尝试，即使在那里有结果，我也无法显示Async。

这是请求的结果：

这是我的代码：

HttpUtility.JavaScriptStringEncode

这是我的异步调用：

 '@Html.Raw(s.Name)'

getOptionValue函数中的

console.log将显示所有正确的值。

我不明白我在做什么错。我想在输入时显示“名称”值，但是在每种类型上都需要使用getData函数发送新请求。

编辑：@Robert我已经解决了等待问题，这是我得到的新结果（返回response.data时）：

Answer 1

等待语法无法正常工作

解决此问题：

 try {
   const response = await axios.get(url);
 } catch(e) {
   console.log(e);
 }

 console.log(response);

Answer 2

您似乎需要使用getData函数中的选项来解决。

如果您返回了等待的诺言，您应该会看到选项出现。

async getData(searchText) {
    let result;
    let url = "https://localhost:44315/api/Article/Paginated?name="
        + searchText
        + "&skip=0&take=10";

    if(searchText != null) {
        return axios.get(url)
            .then(response =>{
                result = response.data;
                this.setState({
                    suggestions: result
                });
                return this.state.suggestions;
            }).catch(error => {
                throw error;
            });
    }
}

Answer 3

这里有几个问题：

 await axios.get(url)
                .then(response =>{
                    result = response.data;
                    this.setState({
                        suggestions: result
                    });
                    return this.state.suggestions;

如果您正在使用async / await，则没有必要使用do .then / .catch

将其重新格式化为：

const response =  await axios.get(url);
this.setState({ suggestions: response.data });

return this.state.suggestions;

接下来，React状态是异步的，因此，如果您的return this.state.suggestions;未返回所需的更新后的状态值。

所以

  async function getData(searchText) {
    // if you want allow empty search
    if (!searchText && searchText !== '') {
      return;
    }

    let url = `https://localhost:44315/api/Article/Paginated?name=${searchText}&skip=0&take=10`;

    const response = await axios.get(url);

    this.setState({ suggestions: response.data });
  }

Answer 4

我找到了解决问题的方法。问题是异步组件期望数据对象的属性为“标签”和“值”。由于我的json不包含这些属性（键），因此Async组件无法显示任何内容，因为他不知道该如何处理我的对象数组。为了解决这个问题，我只需要在该函数中专门创建新变量即可重新映射所需的值。这就是答案：

async getData(searchText) {
   let result;
   let url = "https://localhost:44315/api/Article/Paginated?name="
       + searchText
       + "&skip=0&take=10";

   let dropdownResult = [];

   if(searchText !== '') {
      return await axios.get(url)
          .then(response =>{
               result = response.data;

               for(let [key] in Object.entries(result)) {
                   dropdownResult.push({
                       label: result[key].name,
                       value: result[key].id
                   })
               }

               this.setState({
                   suggestions: dropdownResult
               });

          return this.state.suggestions;
      }).catch(error => {
          throw error;
      });
}

如果Async组件中有一些道具可以让我说“我想要'name'而不是'label'和'id'而不是'value'，那将是很好的。我一直在搜索，并且Async或AsyncSelect都没有组件具有这些属性。

此外，我已切换到AsyncSelect（据目前为止了解，这些都是相同的组件，但是对于那些可以读取该代码而不是Async组件的人来说，AsyncSelect更容易理解）。这是我的AsyncSelect现在的样子：

<AsyncSelect
     options={this.state.suggestions}
     loadOptions={this.getData}
     onChange={(e) => this.articleSelected(e)}
     isClearable={true}
/>

“ articleSelected”看起来像：

articleSelected = (data) => {
    this.setState({
        articleToAdd: data.value
    });
}

“ articleToAdd”状态是我将在其他逻辑中使用的状态（例如，当我想更新特定的Article时。”

愚蠢的是，在他们的文档中没有人说如果对象中没有'label'和'value'键，应用程序将不能工作。

Answer 5

您的问题是对getOptionValue道具的误解。它不用于返回完整的对象。它用于将您的选项解析为单个标识符，例如值或ID。因此，您只需要返回要用作值的属性即可。

要将另一个属性用作标签，您必须使用相应的getOptionLabel道具，该道具的工作方式与getOptionValue道具相同，只是用于标签。

<AsyncSelect
    getOptionValue={option => option.id}
    getOptionLabel={option => option.name}
/>

来自docs：

getOptionValue typeof getOptionValue = (option) => string

将选项数据解析为字符串以比较选项并指定值属性。

getOptionLabel typeof getOptionLabel = (option) => string

将选项数据解析为字符串，以按组件显示为标签。

异步不显示结果

5 个答案: