如何使用 react 和 typescript 根据所选选项列出数据？答案

【问题标题】：How to list data based on the selected option using react and typescript?如何使用 react 和 typescript 根据所选选项列出数据？
【发布时间】：2021-01-26 15:11:47
【问题描述】：

我有两个选择菜单。一种显示项目类型的名称。它有两种类型 item1 和 item2。另一个选择菜单列出了所选类型 item1 或 item2 的项目。

下面是我的代码，

const App = () => {

    const { item1Data } = fetchItem1Data;
    const { item2Data } = fetchItem2Data;
    const allData = (any)[] = [
        ...item1Data,
        ...item2Data,
    ]; //clubs both item1 and item2 data

    const { item1typeData } = useQuery(item1typeData, {
        variables: {
            itemType: 'item1',
        },
        notifyOnNetworkStatusChange: true,
        fetchPolicy: 'network-only',
    });
    const { item2typeData } = useQuery(item2type, {
        variables: {
            itemType: 'item2',
        },
        notifyOnNetworkStatusChange: true,
        fetchPolicy: 'network-only',
    });

    const typesData: any = allData.map((data: any) => {
        return {
            label: data.name,
            value: data.id,
        };
    });
    const itemData = [];
    return (
        <Select
            onChange={(option: SelectOption) =>
                form.setFieldValue(field.name, option.value)
            }
            options={typesData}
            placeholder="Select"
            value={typesData.filter(option => option.value === field.value)}
        />
        <Select
            options={itemData}
            placeholder="Select items"
            value={}
            onChange={}
        />

正如您在上面的代码中看到的，第二个选择菜单没有选项。我想根据在第一个选择菜单中选择的类型为该菜单提供选项。

所以基本上当用户从第一个选择菜单中选择一个选项时，我们需要检查它的类型。

如果选择的类型是 item1，那么我需要将 itemData 设置为 item1typeData。如果选择的类型是 item2，那么我需要将 itemData 设置为 item2typeData。否则 [];

同样对于 allData，当组合 item1Data 和 item2Data 时，我需要映射每个项目并添加它的类型，比如 item1Data 的“item1”和“item2Data”的“item2”。

我该怎么做。有人可以帮我用 react 和 typescript 来做吗？

【问题讨论】：

标签： reactjs typescript

【解决方案1】：

您需要在 App 组件中存储某种本地状态，用于存储从第一次选择中选择的值。

这里有两个部分——一个是获取数据，另一个是将数据呈现到 UI 组件中。我将专注于 UI 方面，因为这就是您要问的。您肯定也有数据获取问题。但是现在，让我们简化一下，假设我们从 props 中得到了两个数组 item1typeData 和 item2typeData。

我对第一次选择的要求有点困惑。我认为选项是两种类型，但您似乎在这里包含了每个选项？

我认为这基本上就是你想要的：

import React, { useState } from "react";
import { Select } from "antd";
import "antd/dist/antd.css";

interface Datum {
  name: string;
  id: string;
}

interface PairedSelectProps {
  item1typeData: Datum[];
  item2typeData: Datum[];
}

const PairedSelect = ({ item1typeData, item2typeData }: PairedSelectProps) => {
  // store the currently selected type
  const [selectedType, setSelectedType] = useState<string>();

  // choose which list to show based on the current state
  const typeObjects = selectedType === "type1" ? item1typeData : item2typeData;

  // map objects to options
  const typeOptions = typeObjects.map((data) => {
    return {
      label: data.name,
      value: data.id
    };
  });

  // store the id of the selected item
  const [selectedItem, setSelectedItem] = useState<string>();

  return (
    <>
      <Select
        options={[
          {
            label: "Type 1",
            value: "type1"
          },
          {
            label: "Type 2",
            value: "type2"
          }
        ]}
        placeholder="Select Type"
        value={selectedType}
        onChange={setSelectedType}
      />
      <Select
        options={typeOptions}
        placeholder="Select Items"
        value={selectedItem}
        onChange={setSelectedItem}
      />
    </>
  );
};

【讨论】：