如何从下拉菜单中显示数据中的选定选项？

Question

我正在从后端获取json数据，我希望多选下拉列表从我获取的以下数据中显示多选下拉列表的默认值。我正在使用React-select的Multi select下拉列表

下面是我要显示为技能对象默认值的数据格式。

[
    {
        "_id": "5dc672b9ff33d00669ba7dec",
        "userSkills": [
            {
                "_id": "5dc672b9ff33d00669ba7def",
                "skill": {
                    "_id": "5dbff84885400a1b1ab99e4b",
                    "skillName": "React"
                }
            },
            {
                "_id": "5dc672b9ff33d00669ba7dee",
                "skill": {
                    "_id": "5dc278798fe4430d32188a1c",
                    "skillName": "Php"
                }
            },
            {
                "_id": "5dc672b9ff33d00669ba7ded",
                "skill": {
                    "_id": "5dbff86f85400a1b1ab99e4e",
                    "skillName": "ExpressJS"
                }
            }
        ],
        "employee": {
            "_id": "5dba9d8b1df3d41104981957",
            "username": "sample1"
        },
        "__v": 0
    },
    {
        "_id": "5dc9504b8a4bf60f2e1581d8",
        "userSkills": [
            {
                "_id": "5dc9504b8a4bf60f2e1581da",
                "skill": {
                    "_id": "5dbff84885400a1b1ab99e4b",
                    "skillName": "React"
                }
            },
            {
                "_id": "5dc9504b8a4bf60f2e1581d9",
                "skill": {
                    "_id": "5dc278798fe4430d32188a1c",
                    "skillName": "Php"
                }
            }
        ],
        "employee": {
            "_id": "5dbbf74a875d930d317849b9",
            "username": "sample2"
        },
        "__v": 0
    }
]

Answer 1

使用react-select

添加纱线反应选择

const data = [
  {
    _id: "5dc672b9ff33d00669ba7dec",
    userSkills: [
      {
        _id: "5dc672b9ff33d00669ba7def",
        skill: {
          _id: "5dbff84885400a1b1ab99e4b",
          skillName: "React"
        }
      },
      {
        _id: "5dc672b9ff33d00669ba7dee",
        skill: {
          _id: "5dc278798fe4430d32188a1c",
          skillName: "Php"
        }
      },
      {
        _id: "5dc672b9ff33d00669ba7ded",
        skill: {
          _id: "5dbff86f85400a1b1ab99e4e",
          skillName: "ExpressJS"
        }
      }
    ],
    employee: {
      _id: "5dba9d8b1df3d41104981957",
      username: "sample1"
    },
    __v: 0
  },
  {
    _id: "5dc9504b8a4bf60f2e1581d8",
    userSkills: [
      {
        _id: "5dc9504b8a4bf60f2e1581da",
        skill: {
          _id: "5dbff84885400a1b1ab99e4b",
          skillName: "React"
        }
      },
      {
        _id: "5dc9504b8a4bf60f2e1581d9",
        skill: {
          _id: "5dc278798fe4430d32188a1c",
          skillName: "Php"
        }
      }
    ],
    employee: {
      _id: "5dbbf74a875d930d317849b9",
      username: "sample2"
    },
    __v: 0
  }
];
let options = data[0].userSkills.map(skill=> skill?{value:skill.skill.skillName, label:skill.skill.skillName.toUpperCase()}:skill)

App.js

class App extends React.Component {
  state = {
    selectedOption: null
  };
  handleChange = selectedOption => {
    this.setState({ selectedOption });
    console.log(`Option selected:`, selectedOption);
  };
  render() {
    const { selectedOption } = this.state;
    return (
      <div>
        <Select
         onChange={this.handleChange}
          defaultValue={[selectedOption]}
          isMulti
          name="colors"
          options={options}
          className="basic-multi-select"
          classNamePrefix="select"
        />
      </div>
    );
  }
}