0
162
Views¿Por qué mi declaración if no funciona mientras la condición es verdadera?
Estoy tratando de crear campos dinámicos basados en mis atributos seleccionados. Tengo 2 objetos de matriz addAttributes y fakeAttributes . fakeAttributes son los detalles de los atributos seleccionados. Tengo un componente de selección desplegable si paso addAttributes, mostrará los datos. Si selecciono cualquier opción de mi componente de selección, se almacenará en el estado setAttributes .
Código en vivo: https://codesandbox.io/s/summer-cloud-m0bvn?file=/src/App.js:1247-1678
const [attributes, setAttributes] = useState([{ label: '', value: 1 }]) const addAttributes = [ { label: 'colors', value: 1 }, { label: 'size', value: 2 }, ] // Attributes data const fakeAttributes = [{ label: 'colors', object: [ { label: 'Black', value: 1 }, { label: 'Green', value: 2 }, ] }, { label: 'size', object: [ { label: 'M', value: 1 }, { label: 'S', value: 2 }, ] } ] Interfaz de usuario desplegable. Estoy usando el paquete npm i react-select para el menú desplegable. 
Este es mi código donde estoy tratando de filtrar y mapear esos objetos de matriz si el valor coincide con la etiqueta, mostrará un texto pero la salida no se muestra y tampoco obtuve ningún error. La condición es coincidente.
<div className='flex flex-row gap-6'> <div className="basis-1/4"> <label className="block text-sm font-medium text-gray-700 mb-3"> Size </label> <Select options={addAttributes} onChange={(e: any) => setAttributes(e)} className="shadow appearance-none border rounded w-full text-gray-700 leading-tight focus:outline-none focus:shadow-outline" isMulti /> </div> {fakeAttributes.map((attr) => { attributes.filter((list) => { console.log(typeof attr.label,":",attr.label,typeof list.label,":",list.label); if (list.label === attr.label) { console.log("ok I am in"); return <h2>Output</h2>; } }); })} </div>¿Alguien puede ayudarme por favor? ¿Cómo puedo resolverlo?
1 answers
Answer question0
Su declaración de devolución está en el ámbito del bloque de filtro. Entonces, está devolviendo el html como el valor booleano del método de filtro, que siempre será verdadero. Y luego, cuando se realiza el filtrado, no hace nada con los elementos filtrados.
Si desea devolver el artículo filtrado, primero debe finalizar el bloque de filtro, luego encontrar el artículo y devolverlo.
Mira esto:
import { useState } from "react"; import Select from "react-select"; import "./styles.css"; export default function App() { const [attributes, setAttributes] = useState([{ label: "", value: 1 }]); // Data need to break and store label info in another variable and add value dynamically const addAttributes = [ { label: "colors", value: 1 }, { label: "size", value: 2 } ]; // Attributes data const fakeAttributes = [ { label: "colors", object: [ { label: "Black", value: 1 }, { label: "Green", value: 2 } ] }, { label: "size", object: [ { label: "M", value: 1 }, { label: "S", value: 2 } ] } ]; return ( <div className="App"> <div className="flex flex-row gap-6"> <div className="basis-1/4"> <label className="block text-sm font-medium text-gray-700 mb-3"> {" "} Size{" "} </label> <Select onChange={(e) => setAttributes(e)} className="shadow appearance-none border rounded w-full text-gray-700 leading-tight focus:outline-none focus:shadow-outline" options={addAttributes} isMulti /> </div> {fakeAttributes.map((attr) => { const item = attributes.filter((list) => { return list.label === attr.label; })[0]; if (item) { console.log("ok I am in"); return <h2>Output</h2>; } })} </div> </div> ); }