Javascript 如何在react-hook表单中的react-select中使用useEffect中的条件默认值？

我正在使用包含react-select CreatableSelect multiselect输入的react-hook表单处理一个表单。multiselect用于给定帖子的标签，它是基于用户是否选择更新现有帖子的标签的条件

我的问题是，当用户选择包含标记的现有帖子时，multiselect的defaultValue不起作用

总体流程是：用户选择现有帖子（在我的示例中是在

PublicShareNetworkSelect

中）>onChange函数更改存储在hook中的帖子ID（

selectedNetwork

在我的示例中）>在

selectedNetwork

中更改激发设置tags变量的

getNetworkData

函数（

networkTags

）用作多选默认值

另外，

getTags（）

函数用于填充multiselect中的

选项

我认为，这个问题与从API获取数据有关，因为我试图创建一个API，但在没有axios调用的情况下，它的工作方式正是我所希望的。但是，在我的完整示例中，当I
console.log
allTags

和

networkTags

时，数组中有匹配的对象（匹配项应为defaultValue）

代码示例：主/父窗体组件

import React, { useState, useEffect } from "react";
import axios from "axios";
import Form from "react-bootstrap/Form";
import { useForm, Controller } from "react-hook-form";
import CreatableSelect from "react-select/creatable";
import Button from "react-bootstrap/Button";
import PublicShareNetworkSelect from "./publicShareNetworkSelect";

function PublicShareForm(props) {
  const {
    register,
    handleSubmit,
    reset,
    control,
    errors,
    watch,
    onChange,
  } = useForm();
  const [loading, setLoading] = useState(false);
  const [selectedNetwork, setSelectedNetwork] = useState([]);
  const [allTags, setAllTags] = useState();
  const [networkTags, setNetworkTags] = useState([]);

  //Create axios instance
  const axiosSharedNetwork = axios.create();

  async function getTags() {
    const getAllTagsApi = {
      url: "/public-share/get-all-tags",
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json;charset=UTF-8",
      },
      method: "GET",
    };
    await axiosSharedNetwork(getAllTagsApi)
      .then((response) => {
        const resData = response.data;
        const tags = resData.map((tag, index) => ({
          key: index,
          value: tag.tag_id,
          label: tag.name,
        }));
        setAllTags(tags);
        setLoading(false);
      })
      .catch((error) => {
        console.log(error.response);
      });
  }

  async function getNetworkData(networkId) {
    const getNetworkDataApi = {
      url: "/public-share/get-network/" + networkId,
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json;charset=UTF-8",
      },
      method: "GET",
    };
    const getNetworkTagsApi = {
      url: "/public-share/get-network-tags/" + networkId,
      headers: {
        Accept: "application/json",
        "Content-Type": "application/json;charset=UTF-8",
      },
      method: "GET",
    };
    await axiosSharedNetwork(getNetworkDataApi)
      .then(async (response) => {
        const resData = response.data;
        //Set some variables (i.e. title, description)
        await axiosSharedNetwork(getNetworkTagsApi)
          .then(async (response) => {
            const tagResData = response.data;
            const tags = tagResData.map((tag, index) => ({
              key: index,
              value: tag.tag_id,
              label: tag.name,
            }));
            setNetworkTags(tags);
            setLoading(false);
          })
          .catch((error) => {
            console.log(error.response);
          });
      })
      .catch((error) => {
        console.log(error.response);
      });
  }

  useEffect(() => {
    getTags();
    getNetworkData(selectedNetwork);
    reset({ tags: selectedNetwork });
  }, [reset]);

  async function onSubmit(data) {
    //Handle submit stuff
  }
  console.log(allTags);
  console.log(networkTags);
  return (
    <Form id="public-share-form" onSubmit={handleSubmit(onSubmit)}>
      <Form.Group>
        <Form.Label>Create New Version of Existing Shared Network?</Form.Label>
        <PublicShareNetworkSelect
          control={control}
          onChange={onChange}
          setSelectedNetwork={setSelectedNetwork}
        />
        <Form.Label>Tags</Form.Label>
        <Controller
          name="tags"
          defaultValue={networkTags}
          control={control}
          render={({ onChange }) => (
            <CreatableSelect
              isMulti
              placeholder={"Select existing or create new..."}
              onChange={(e) => onChange(e)}
              options={allTags}
              defaultValue={networkTags}
              classNamePrefix="select"
            />
          )}
        />
      </Form.Group>
        <Button variant="secondary" onClick={props.handleClose}>
          Cancel
        </Button>
        <Button variant="primary" type="submit">
          Share
        </Button>
    </Form>
  );
}

export default PublicShareForm;

import React，{useState，useffect}来自“React”；
从“axios”导入axios；
从“react引导/表单”导入表单；
从“react hook form”导入{useForm，Controller}；
从“反应选择/可创建”导入可创建选择；
从“反应引导/按钮”导入按钮；
从“/PublicShareNetworkSelect”导入PublicShareNetworkSelect；
功能PublicShareForm（道具）{
常数{
登记
手推，
重置，
控制
错误，
看,，
一旦改变，
}=useForm（）；
const[loading，setLoading]=useState（false）；
const[selectedNetwork，setSelectedNetwork]=useState（[]）；
const[allTags，setAllTags]=useState（）；
const[networkTags，setNetworkTags]=useState（[]）；
//创建axios实例
const axiosSharedNetwork=axios.create（）；
异步函数getTags（）{
常量getAllTagsApi={
url:“/public share/get all tags”，
标题：{
接受：“应用程序/json”，
“内容类型”：“应用程序/json；字符集=UTF-8”，
},
方法：“获取”，
};
等待axiosSharedNetwork（getAllTagsApi）
。然后（（响应）=>{
const resData=response.data；
const tags=resData.map（（标记，索引）=>({
关键词:索引,，
值：tag.tag_id，
标签：tag.name，
}));
设置所有标签（标签）；
设置加载（假）；
})
.catch（（错误）=>{
console.log（error.response）；
});
}
异步函数getNetworkData（networkId）{
常量getNetworkDataApi={
url:“/public share/get network/”+networkId，
标题：{
接受：“应用程序/json”，
“内容类型”：“应用程序/json；字符集=UTF-8”，
},
方法：“获取”，
};
常量getNetworkTagsApi={
url:“/public share/get network tags/”+networkId，
标题：{
接受：“应用程序/json”，
“内容类型”：“应用程序/json；字符集=UTF-8”，
},
方法：“获取”，
};
等待axiosSharedNetwork（getNetworkDataApi）
。然后（异步（响应）=>{
const resData=response.data；
//设置一些变量（即标题、说明）
等待axiosSharedNetwork（getNetworkTagsApi）
。然后（异步（响应）=>{
const tagResData=response.data；
const tags=tagResData.map（（标记，索引）=>({
关键词:索引,，
值：tag.tag_id，
标签：tag.name，
}));
设置网络标签（标签）；
设置加载（假）；
})
.catch（（错误）=>{
console.log（error.response）；
});
})
.catch（（错误）=>{
console.log（error.response）；
});
}
useffect（（）=>{
getTags（）；
获取网络数据（已选择网络）；
重置（{tags:selectedNetwork}）；
}，[reset]）；
提交上的异步函数（数据）{
//处理提交资料
}
console.log（所有标签）；
console.log（networkTags）；
返回(
是否创建现有共享网络的新版本？
标签
(
onChange（e）}
选项={allTags}
defaultValue={networkTags}
classNamePrefix=“选择”
/>
)}
/>
取消
分享
);
}
导出默认PublicShareForm；

PublicShareNetworkSelect—触发设置现有帖子id（selectedNetwork）功能的选择组件：

import React，{useState，useffect}来自“React”；
从“axios”导入axios；
从“react hook form”导入{Controller}；
从“反应选择”导入选择；
功能PublicShareNetworkSelect（道具）{
const[loading，setLoading]=useState（false）；
const[networks，setNetworks]=useState（[]）；
//创建axios实例
const axiosNetworks=axios.create（）；
//添加请求拦截器
axiosNetworks.interceptors.request.use(
函数（配置）{
//在发送请求之前做些什么
设置加载（真）；
返回配置；
},
函数（错误）{
//处理请求错误
设置加载（假）；
返回承诺。拒绝（错误）；
}
);
//添加一个响应拦截器
axiosNetworks.interceptors.response.use(
功能（响应）{
//在2xx范围内的任何状态代码都会触发此功能
//处理响应数据
设置加载（真）；
返回响应；
},
函数（错误）{
//任何超出2xx范围的状态代码都会触发此功能
//做一些有反应的错误
import React, { useState, useEffect } from "react";
import axios from "axios";
import { Controller } from "react-hook-form";
import Select from "react-select";

function PublicShareNetworkSelect(props) {
  const [loading, setLoading] = useState(false);
  const [networks, setNetworks] = useState([]);
  //Create axios instance
  const axiosNetworks = axios.create();
  // Add a request interceptor
  axiosNetworks.interceptors.request.use(
    function (config) {
      // Do something before request is sent
      setLoading(true);
      return config;
    },
    function (error) {
      // Do something with request error
      setLoading(false);
      return Promise.reject(error);
    }
  );

  // Add a response interceptor
  axiosNetworks.interceptors.response.use(
    function (response) {
      // Any status code that lie within the range of 2xx cause this function to trigger
      // Do something with response data
      setLoading(true);
      return response;
    },
    function (error) {
      // Any status codes that falls outside the range of 2xx cause this function to trigger
      // Do something with response error
      setLoading(false);
      return Promise.reject(error);
    }
  );

  async function getNetworks() {
    const getNetworksApi = {
      url: "public-share/get-user-networks/" + props.username,
      method: "GET",
    };
    await axiosNetworks(getNetworksApi)
      .then(async (response) => {
        setNetworks(
          response.data.map((network, index) => ({
            key: index,
            value: network.network_id,
            label: network.title,
          }))
        );
        setLoading(false);
      })
      .catch((error) => {
        console.log(error.response);
      });
  }

  useEffect(() => {
    getNetworks();
  }, []);

  function handleChange(data) {
    console.log(data);
    if (data) {
      props.setSelectedNetwork(data.value);
      props.getNetworkData(data.value);
    } else {
      props.setNetworkTitle("");
      props.setNetworkDesc("");
    }
  }

  if (!loading) {
    if (networks.length === 0) {
      return (
        <React.Fragment>
          <br />
          <p className="font-italic text-muted">
            You haven't created any public networks yet.
          </p>
        </React.Fragment>
      );
    } else {
      return (
        <Controller
          name="tags"
          defaultValue={[]}
          control={control}
          render={(props) => (
            <CreatableSelect
              isMulti
              placeholder={"Select existing or create new..."}
              onChange={(e) => onChange(e)}
              // defaultValue={networkTags}
              options={allTags}
              classNamePrefix="select"
              {...props}
            />
          )}
        />
      );
    }
  } else {
    return <React.Fragment>Loading...</React.Fragment>;
  }
}

export default PublicShareNetworkSelect;