问将整数数组映射到值和选择值的id
EN

Stack Overflow用户

提问于 2021-06-25 00:42:06

回答 1查看 53关注 0票数 0

我正在尝试将值从我的api转换加载到react-select {value: 1，label："Tessting“}中，我已经成功地进行了单项选择，但多项选择遇到了问题。

const get_companys = () => {
    API.get("/companys")
      ...
        r.data = r.data.map(({ id: value, name: label }) => ({ value, label }));
        set_companys(r.data);
      ...
  };

  const get_news_release_categorys = () => {
    API.get("/news_release_categorys")
      ...
        r.data = r.data.map(({ id: value, name: label }) => ({ value, label }));
        set_news_release_categorys(r.data);
      ...
  };

  useEffect(() => {
    get_news_release_categorys();
    get_companys();

    API.get(`/news_release/${props.id}`)
      .then((r) => {
        reset({
          id: r.data.id,
          // Set form value with id ( works )
          company_id: r.data.company_id,
          // Set form with test array of category id's here 
          news_release_categorys: [4, 5, 3],
        });
      })
      .catch((e) => console.log(e));
  }, [props.id, reset]);

set_news_release_categorys转换的数据/状态

0: {value: 1, label: "m&a"}
1: {value: 2, label: "drill result"}
2: {value: 3, label: "mineral resource estimate"}
3: {value: 4, label: "feasibility study"}
4: {value: 5, label: "production guidance"}
...

下面的代码可以很好地处理单项选择

 {/* Working Correctly */}
      <Controller
        name="company_id"
        rules={{ required: true }}
        control={control}
        render={({ field: { value, onChange } }) => (
          <ReactSelect options={companys} value={companys && companys.find((x) => x.value === value)} onChange={(selected) => onChange(selected.value)} />
        )}
    />

下面有效(用于选择和添加类别/标签)，但不加载和映射初始值。如果有人能帮我找出将[4,5,3]转换成[{value: 4, label: "feasibility study"},{value: 5, label: "production guidance"},{value: 3, label: "mineral resource estimate"},]的正确的过滤器/映射/缩减组合

   {/* Multi not loading default "values" */}
      <Controller
        control={control}
        name="news_release_categorys"
        render={({ field: { value, onChange } }) => {
          return <ReactSelect className="basic-multi-select" onChange={(val) => onChange(val.map((c) => c.value))} options={news_release_categorys} isMulti />;
        }}
      />

javascript

reactjs

回答 1

Stack Overflow用户

回答已采纳

发布于 2021-06-25 02:28:38

在单一模式中，您可以通过从列表中查找默认值来正确设置默认值。在多值模式中，您只需通过从列表中筛选这些值来映射值。

单人：

   <ReactSelect 
       options={companys} 
       value={companys && companys.find((x) => x.value === value)} 
       onChange={(selected) => onChange(selected.value)} 
   />

多个：

   <ReactSelect 
       className="basic-multi-select" 
       value={companys && companys.filter((x) => value.includes(x.value))} 
       onChange={(val) => onChange(val.map((c) => c.value))} 
       options={news_release_categorys} 
       isMulti 
   />