时间戳

首页 > 解决方案 > 在 React 中，如何将选定的下拉数据传递给状态

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

问题描述

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

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

当我的 API GET 请求返回所有字段时，我应该如何仅获取主题 _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
      },
  ]
}

反应功能组件：

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

，就像在数据库上配置的那样。

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

标签： javascriptreactjsdrop-down-menuuse-state

解决方案

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

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

这将导致：

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

只给你你需要的字符串。

推荐阅读