如何在react-select multi中显示选定的选项？

Question

我正在使用react-select和isMulti，有一个选项列表。如果与给定的数组值匹配，我想显示默认选择的几个选项。

import React, { useState } from "react";
import "./styles.css";
import Select from "react-select";

export default function App() {
  const options = [
    {
      value: "one",
      label: "One Label"
    },
    {
      value: "two",
      label: "Two Label"
    },
    {
      value: "three",
      label: "Three Label"
    },
    {
      value: "four",
      label: "Four Label"
    }
  ];

  const getSelected = ["two", "four"];

  const [list, setList] = useState(options);

  list.map((val: any) => {
    getSelected.map((selectedVal: any) => {
      if (val.value === selectedVal) {
        setList(val);
      }
    });
  });

  return (
    <div className="App">
      <Select options={list} isMulti />
    </div>
  );
}

感谢您的努力！

Answer 1

尝试以下代码：

import React, {useEffect, useState} from "react";
import Select from "react-select";

function App() {
  const options = [
    {
      value: "one",
      label: "One Label"
    },
    {
      value: "two",
      label: "Two Label"
    },
    {
      value: "three",
      label: "Three Label"
    },
    {
      value: "four",
      label: "Four Label"
    }
  ];

  const getSelected = ["two", "four"];

  const [list, setList] = useState(options);

  useEffect(() => {
    setList(list.filter((val) => getSelected.includes(val.value)))
  }, []);

  return (
      <div className="App">
        <Select options={list} isMulti />
      </div>
  );
}

Answer 2

这里有两个错误。

1. 您仅在地图中设置 1 个值
2. 你在每次渲染时都这样做

首先导入useEffect。

import React, { useState, useEffect } from "react";

然后替换这个

  list.map((val: any) => {
    getSelected.map((selectedVal: any) => {
      if (val.value === selectedVal) {
        setList(val);
      }
    });
  });

与

useEffect(() => {
  const selectedValues = list.filter((val: any) => {
    return getSelected.includes(val)
  });
  setList(seletedValues);
},[list]) 

在此代码中，我们使用 useEffect，以便仅在列表更改时运行此代码，这就是为什么我们必须将列表添加到

useEffect

的依赖项数组中

然后我们过滤 selectedList 中

getSelected

数组中的值。