Início / coding / Perguntas / 77771926
Accepted
PixelPaul
Asked: 2024-01-07 12:41:35 +0800 CST

dados filter() e map() para botões de opção no React

  • 772

Estou obtendo dados de uma API no seguinte formato:

const carProperties = [
        {
            "key": "Brand",
            "values": [
                {
                    "id": 1,
                    "name": "Ford"
                },
                {
                    "id": 2,
                    "name": "Chevy"
                },
                {
                    "id": 3,
                    "name": "Honda",
                }
            ]
        },
        {
            "key": "Color",
            "values": [
                {
                    "id": 100,
                    "name": "Blue"
                },
                {
                    "id": 200,
                    "name": "Red"
                },
                {
                    "id": 300,
                    "name": "White",
                }
            ]
        }
    ]

Preciso filtrar esses dados por seus keye, em seguida, mapeá-los valuespara elementos HTML, como botões de opção, caixas de seleção, etc. Não consigo obter a sintaxe correta para poder mapear os valores. Aqui está o que eu tenho:

carProperties?.filter(property => property.key === "Brand").map((data, index) => (
        <Div key={index}>
            <Form.Check>
                <Form.Check.Input
                    type="radio"
                    id={data.values.id.toString()}
                    value={data.values.name}
            />
                <Form.Check.Label className="form-check-label">{data.values.name}</Form.Check.Label>
            </Form.Check>
        </Div>))

Os tipos para carPropertiessão:

export interface CarProperty {
    key: string,
    values: CarPropertyValue[]
}

export interface CarPropertyValue {
    id: number,
    name: string,
}
javascript

1 respostas

  1. Best Answer

    Você precisa mapear os valores, não uma versão filtrada da carPropertiesmatriz. Existem algumas maneiras de fazer isso, mas se você puder garantir que há apenas um objeto no seu carPropertiesque possui um keyof Brand, então você deve usar .find()em vez de filter(). Isso interromperá a pesquisa no array assim que encontrar a propriedade da marca e retornará o objeto que você está procurando .values, no qual você poderá acessar a propriedade e mapear:

    const brandProperties = useMemo(
  () => carProperties?.find(property => property.key === "Brand"),
  [carProperties]
);

    O useMemo()gancho ajudará a evitar a pesquisa do Brandobjeto em seu array cada vez que seu componente for renderizado novamente e, em vez disso, só o pesquisará uma vez na montagem ou quando carPropertiesfor alterado. Então, no seu JSX, você pode mapear brandProperties.valuesassim:

    brandProperties?.values.map(brand =>
  <Div key={brand.id}>
    <Form.Check>
      <Form.Check.Input
        type="radio"
        id={brand.id.toString()}
        value={brand.name}
      />
      <Form.Check.Label className="form-check-label">{brand.name}</Form.Check.Label>
    </Form.Check>
  </Div>
)

    Se você puder ter vários objetos com carPropertiesuma Brandchave, poderá usar um mapa aninhado para mapear a valuesmatriz de cada objeto para o seu Div:

    carProperties?.filter(property => property.key === "Brand").map(carProperty => carProperty.values.map(value => 
  <Div key={value.id}>
    <Form.Check>
      <Form.Check.Input
        type="radio"
        id={value.id.toString()}
        value={value.name}
      />
      <Form.Check.Label className="form-check-label">{value.name}</Form.Check.Label>
    </Form.Check>
  </Div>
))
    • 1

relate perguntas