reactjs - 使用 React AsyncSelect 的 React Hook Form 无法加载选项

Question

更新，移除options道具

还是失败了。

文件 2：note.form-master.js

import React, { useState } from "react";
import { Controller } from "react-hook-form";
import AsyncSelect from "react-select/async";
import UserDataService from "../../../services/user.service";

const NoteFormMaster = ({ register, control, errors }) => {
  // eslint-disable-next-line
  const [selectedUser, setSelectedUser] = useState();

  const loadOptions = (inputText) => {

    // Axios here
    UserDataService.getUserList(inputText)
      .then((response) => {
        return response.data.map((user) => ({
          value: user.id,
          label: user.username,
        }));
      })
      .catch((error) => {
        alert(JSON.stringify(error));
      });
  };

  const handleInputChange = (selectedUser) => {
    if (selectedUser) {
      setSelectedUser(selectedUser);
    }
  };

  return (
    <div className="form-group col-md-6">
    <label htmlFor="shareWith">Share With</label>
    <Controller
      control={control}
      name="shareWith"
      id="shareWith"
      as={
        <AsyncSelect
          cacheOptions
          isMulti
          isClearable
          loadOptions={(v) => loadOptions(v)}
          defaultOptions={[]}
          onInputChange={handleInputChange}
        />
      }
      // render={(props) => (
      //   <AsyncSelect
      //     cacheOptions
      //     isMulti
      //     isClearable
      //     loadOptions={(v) => loadOptions(v)}
      //     defaultOptions={[]}
      //     onInputChange={handleInputChange}
      //   />
      // )}
    />
     </div>
  );
};

export default NoteFormMaster;

经过一整天的尝试解决这个 React Hook Form，我决定在这里问，因为我仍然失败。我使用如下反应钩子形式。我把它分成两个文件，以便于阅读。

问题是，成功时没有出现AsyncSelect 。这是我的源代码：optionaxios response

文件 1：note.create.js

import React from "react";
import { useForm } from "react-hook-form";
import NoteDataService from "../../../services/note.service";
import NoteFormMaster from "./note.form-master";
import { Button } from "react-bootstrap";

const NoteCreate = (props) => {
  const { register, control, errors, handleSubmit } = useForm({
    defaultValues: {
      title: "",
      shareWith: [],
    },
  });

  const onSubmit = (data) => {
      // Some logic here
  };

  return (
    <>
      <form onSubmit={handleSubmit(onSubmit)}>
        
         // Load form master
        <NoteFormMaster register={register} control={control} errors={errors} />

        <div className="row mt-4">
          <div className="col">
            <Button variant="primary" type="submit" className="float-right">
              Submit
            </Button>
          </div>
        </div>
      </form>
    </>
  );
};

export default NoteCreate;

文件 2：note.form-master.js

import React, { useState } from "react";
import { Controller } from "react-hook-form";
import AsyncSelect from "react-select/async";
import UserDataService from "../../../services/user.service";

const NoteFormMaster = ({ register, control, errors }) => {
  // eslint-disable-next-line
  const [selectedUser, setSelectedUser] = useState();
  const [suggestion, setSuggestion] = useState([]);

  const loadOptions = (inputText) => {

    // Axios here
    UserDataService.getUserList(inputText)
      .then((response) => {
        let options = response.data.map((user) => ({
          value: user.id,
          label: user.username,
        }));
        setSuggestion(options);
      })
      .catch((error) => {
        alert(JSON.stringify(error));
      });
  };

  const handleInputChange = (selectedUser) => {
    if (selectedUser) {
      setSelectedUser(selectedUser);
    }
  };

  return (
    <div className="form-group col-md-6">
    <label htmlFor="shareWith">Share With</label>
    <Controller
      control={control}
      name="shareWith"
      id="shareWith"
      as={
        <AsyncSelect
          cacheOptions
          isMulti
          isClearable
          options={suggestion}
          loadOptions={(v) => loadOptions(v)}
          defaultOptions={[]}
          onInputChange={handleInputChange}
        />
      }
      // render={(props) => (
      //   <AsyncSelect
      //     cacheOptions
      //     isMulti
      //     isClearable
      //     loadOptions={(v) => loadOptions(v)}
      //     defaultOptions={[]}
      //     onInputChange={handleInputChange}
      //   />
      // )}
    />
     </div>
  );
};

export default NoteFormMaster;

我已经使用检查了 axios 结果console.log (suggestion)

结果：

[
    {
        "value": 44,
        "label": "Dzil"
    },
    {
        "value": 190,
        "label": "gmaildzil"
    }
]

标签： reactjs

Answer 1

正如我在评论中所写：

const loadOptions = (inputText) => {

    // return promise here.
    return UserDataService.getUserList(inputText)
      .then((response) => {
        return response.data.map((user) => ({
          value: user.id,
          label: user.username,
        }));
      })
      .catch((error) => {
        alert(JSON.stringify(error));
      });
  };

// The defaultOptions prop determines "when" your remote request is initially fired.
<AsyncSelect
  cacheOptions
  isMulti
  isClearable
  loadOptions={(v) => loadOptions(v)}
  defaultOptions
  onInputChange={handleInputChange}
/>