es.davy.ai

Preguntas y respuestas de programación confiables

¿Tienes una pregunta?

Si tienes alguna pregunta, puedes hacerla a continuación o ingresar lo que estás buscando.

Ant Design Dynamic Data no se vincula a Select.

19 Jun, 2023 Programación

Estoy usando React para un proyecto escolar. Los datos dinámicos no se vinculan a las opciones de Ant Design en React JS. El resultado es una lista de opciones vacía. En realidad, los datos provienen de una API externa. Para fines de prueba, asigné los datos a la variable de estado. Los datos vienen en una matriz 2D, así que estoy mapeando los datos dos veces.

Resultado:

enter image description here

import { useEffect, useState } from "react";
import { Select } from "antd";
const { Option } = Select;

const Complete = () => {
    const [list, setPersons] = useState([
        [
            {
                id: 1,
                personName: "Owan",
            },
            {
                id: 2,
                personName: "More",
            },
            {
                id: 3,
                personName: "Jaila",
            },
            {
                id: 4,
                personName: "Eerov",
            },
        ],
        [
            {
                id: 5,
                personName: "Rell",
            },
            {
                id: 6,
                personName: "Juko",
            }
        ]
    ]);




    useEffect(() => {
        console.log(list);
    }, []);

    return (
        <select showsearch="" style="{{" width:="" 200="" }}="" placeholder="Seleccione una persona" optionfilterprop="children" filteroption="{(input," option)="">
                option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
            }
        >
            {list.map((l) => {

                l.map((person) => {
                    console.log(person);
                    <option value="{person.id}">
                        {person.personName}
                    </option>;
                });
            })}
        </select>
    );
};

export default Complete;
Tags:  , ,

Answer

  1. Avatar for davy.ai
    davy.ai

    Solución para vincular datos dinámicos a las opciones de Ant Design en ReactJS

    Para vincular datos dinámicos a las opciones de Ant Design en ReactJS, necesitamos usar la función map() para iterar a través de los datos y generar la lista de opciones.

    En el fragmento de código proporcionado, la función map() se ha utilizado dos veces, lo cual no es necesario. En su lugar, podemos aplanar la matriz 2D utilizando la función flat() y luego usar la función map() para generar la lista de opciones.

    Aquí está el código actualizado:

    import { useEffect, useState } from "react";
import { Select } from "antd";
const { Option } = Select;

const Complete = () => {
  const [list, setPersons] = useState([
    [
      {
        id: 1,
        personName: "Owan",
      },
      {
        id: 2,
        personName: "More",
      },
      {
        id: 3,
        personName: "Jaila",
      },
      {
        id: 4,
        personName: "Eerov",
      },
    ],
    [
      {
        id: 5,
        personName: "Rell",
      },
      {
        id: 6,
        personName: "Juko",
      }
    ]
  ]);

  useEffect(() => {
    console.log(list);
  }, []);

  return (
    <select showsearch="" style="{{" width:="" 200="" }}="" placeholder="Selecciona una persona" optionfilterprop="children" filteroption="{(input," option)="">
        option.children.toLowerCase().indexOf(input.toLowerCase()) >= 0
      }
    >
      {list.flat().map((person) => ( // usando flat()
        <option value="{person.id}" key="{person.id}"> {/* agregando clave */}
          {person.personName}
        </option>
      ))}
    </select>
  );
};

export default Complete;

    La función flat() se utiliza para aplanar la matriz 2D y la función map() se utiliza para generar la lista de opciones. También hemos agregado una propiedad key a cada componente Option para que React los identifique de manera única.

    Con este código actualizado, los datos dinámicos deberían vincularse a las opciones de Ant Design y mostrar la lista de personas.

Comments are closed.