Блог

у меня есть два меню выбора. тот, который отображает имена типов элементов. Он имеет два типа 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 . else [];

также для allData при объединении как item1Data, так и item2Data мне нужно сопоставить каждый элемент и добавить его тип, скажем, ‘item1’ для item1Data и ‘item2’ для ‘item2Data’.

как я могу это сделать. может ли кто-нибудь помочь мне сделать это с помощью react и typescript.

Вам нужно какое-то локальное состояние внутри вашего App компонента, где вы сохраняете выбранное значение из первого выбора.

Здесь есть две части: одна извлекает данные, а другая — отображает эти данные в компоненте пользовательского интерфейса. Я собираюсь сосредоточиться на аспекте пользовательского интерфейса, поскольку это то, о чем вы спрашиваете. У вас также определенно есть проблемы с выборкой данных. Но пока давайте упростим это и предположим, что мы получаем два массива item1typeData и item2typeData передаем их из props.

Я немного смущен требованиями к первому выбору. Я бы подумал, что варианты двух типов, но вы, кажется, включаете здесь все варианты?

Я думаю, что это в основном то, что вы хотите:

 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}
      />
    </>
  );
};