在 React 中，如何将选定的下拉数据传递给状态

Question

我一直在尝试为我的项目制作一个多 select 下拉列表，一个人可以 select 他们在网站注册时教授的学校科目。但是我在将 selected 值传递给简单选项下拉列表中声明的状态时遇到了麻烦。

当我尝试向我的 API 发出 POST 请求时（使用 NodeJS、express 和 mongoDB 用于数据库），console.log returns 主题对象具有三个包含所有主题数据的数组。我只想传递 _id 字段，因为这是请求的内容。

当我的 API GET 请求 returns 所有字段时，我应该如何只获取主题 _id？

参考代码：

API 通话

async function listActiveSubjects() {
    const response = await api.get("/subject");
    return response.data;
}

JSON 从请求返回：

{
  "subjects": [
     {
            "isActive": true,
            "_id": "6001e71606a211004877f6e1",
            "name": "Subject 1",
            "description": "Subject 1 description",
            "__v": 0
      },
      {
            "isActive": true,
            "_id": "6001e71606a211004877f6e1",
            "name": "Subject 2",
            "description": "Subject 2 description",
            "__v": 0
      },
  ]
}

React 功能组件：

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

import { listActiveSubjects } from '../../../../services/subjects';

const TeacherClassInfo = props => {
    const [subjects, setSubjects] = useState();
    const [selected, setSelected] = useState({ _id: ''})

    const handleListActiveSubjects = async () => {
        const getSubjects = await listActiveSubjects();
        setSubjects(getSubjects);
    }

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

    const onChange = (key, _id) => {
        setSelected(() => ({
            [key]: _id,
        }))
    }

    return(
        <select>
          {subjects &&
            subjects.subjects.map((subjects) => {
              return (
                <option
                  onChange={_id => onChange(_id)}
                    key={subjects._id}
                    value={selected[subjects._id]}>
                      {subjects.name}
                 </option>
              );
           })
         }
      </select>  
    );

日志显示的输出是：

subjects: Array(2)
    0: {isActive: true, _id: "6001e71606a211004877f6e1", name: "Subject 1", description: "Subject 1 
description", __v: 0}
    1: {isActive: true, _id: "6001e73106a211004877f6e2", name: "Subject 2", description: "Subject 2 description", __v: 0}
length: 2

在我的理解中应该是：

subjects: Array(1)
    0: {_id: "6001e71606a211004877f6e1"}
length: 1

，与数据库上配置的一样。

从我在这里看到的其他教程和问题来看，这应该设置 selected id，但不幸的是它没有按预期工作。任何帮助将不胜感激

Answer 1

您可以通过对 response.data.subjects 数组使用 map() 方法来 return 数组中的所有 _id 值。这将遍历每个主题，并根据回调中的 returned 值创建一个新数组。在这种情况下，它是 _id 属性值。

async function listActiveSubjects() {
  const response = await api.get("/subject");
  const ids = response.data.subjects.map(({ _id }) => _id);
  return ids;
}

这将导致：

[
  "6001e71606a211004877f6e1",
  "6001e73106a211004877f6e2",
]

只为您提供所需的字符串。

在 React 中，如何将选定的下拉数据传递给状态

In React, How to pass the selected dropdown data to state

javascript

drop-down-menu

reactjs

use-state