Состояние компонента Select из AntD

Question

Я пишу проект на React + TS. Проект - дерево элементов, в котором можно посмотреть характеристики элемента.

В первом табе находится просто немного информации, во втором - селект. Код выглядит следующим образом:

import { Tabs } from "antd"
import type { TabsProps } from 'antd';
import { useAppSelector } from "../../store/hooks";
import { Properties } from "../../types/types";
import { SelectComponent } from "../Select/Select";
import styled from "styled-components";

const Container = styled.div`
    padding: 10px 0 0 10px;
    display: flex;
    flex-direction: column;
`
const Text = styled.p`
    margin: 0;
    font-size: 16px;
`

export const TreeOptions = () => {
    const { itemProperties }: { itemProperties: Properties[] | [] } = useAppSelector(state => state.tree)

    const items: TabsProps['items'] = itemProperties.map((item, i) => ({
        key: item.id,
        label: item.tabname,
        children: item.editable !== true ?
            <Container>
                {item.options.map((option, i) => <Text key={i}>{option}</Text>)}
            </Container> :
            <Container>
                <SelectComponent options={item} />
            </Container>
    }))

    return <Tabs items={items} />
}

Сам компонент Select выглядит следующим образом:

import { Select } from "antd"
import { useState } from "react";
import styled from "styled-components";

const StyledSelect = styled(Select)`
    width: 100%;
    max-width: 300px;
`

export const SelectComponent = (options: any) => {
    const [selectedValue, setSelectedValue] = useState<string | undefined>(undefined)

    return (
        <StyledSelect  
            value={selectedValue} 
            options={options.options.options.map((item: string) => ({ value: item, label: item }))}
        />
    )
}

Проблема в том, что у всех элементов Select не отдельные локальные state, а один на всех. Я в упор не понимаю почему. Я пытался задавать уникальные key, но это не помогло. Почему это могло произойти и как это можно исправить? На всякий случай, оставлю свой код тут
Буду очень благодарен за помощь и подсказки

Answer 1

Проблема, заключается в том, что компонент SelectComponent принимает пропсы неправильно. Вы передаёте весь объект options в качестве пропса, но не извлекаете его корректно внутри компонента. Из-за этого у всех SelectComponent не сохраняется уникальный стейт.

export const TreeOptions = () => {
    const { itemProperties }: { itemProperties: Properties[] | [] } = useAppSelector(state => state.tree)

    const items: TabsProps['items'] = itemProperties.map((item) => ({
        key: item.id,
        label: item.tabname,
        children: item.editable !== true ?
            <Container>
                {item.options.map((option, i) => <Text key={i}>{option}</Text>)}
            </Container> :
            <Container>
                <SelectComponent key={item.id} options={item.options} />
            </Container>
    }))

    return <Tabs items={items} />
}

В компоненте SelectComponent:

export const SelectComponent = ({ options }: { options: string[] }) => {
    const [selectedValue, setSelectedValue] = useState<string | undefined>(undefined)

    return (
        <StyledSelect  
            value={selectedValue} 
            onChange={setSelectedValue}
            options={options.map((item: string) => ({ value: item, label: item }))}
        />
    )
}

БЛОГ НА HUSL

Состояние компонента Select из AntD

Ответы (1 шт):