Así que este es un ejemplo del problema que estoy teniendo.
import { useState, useEffect } from "react"; import symbols from "./Symbols.js" const DrawSymbol = (type) => { const [state, setState] = useState(""); useEffect(() => { const g = symbols.find((obj) => { return obj[type]; }); setState(g.url); },[]); return <div>{state}<div> };Symbol.js tiene datos svg, así que los truncaré para que sean legibles
const symbols = [ { "0":{ "url":"data:image/svg+xml;base64,PHN2ZyB4bWxucz..." } }, { "1":{ "url":"data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cD....." } }, { "2":{ "url":"data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDov..= " } }, { "2B":{ "url":"data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0c.... " } }, ..... ] export default symbols; Symbols.js exporta una matriz de objetos a este archivo. El problema aquí es que si tuviera que decir manualmente obj['name'] , funciona y devuelve el objeto solicitado, pero si trato de usar el nombre de variable pasado obj[type] , aparece como indefinido. Usando el depurador en Firefox, puedo ver que la variable que se pasa tiene un valor de cadena, pero aún así nunca funciona. Está conduciendo realmente loco.
const DrawSymbol = (props) => { const [state, setState] = useState(""); useEffect(() => { if(props.type) { // `symbols` is a array of object. you need to find one object from that array const g = symbols.find((obj) => obj.type === props.type); setState(g?.text); } }, [props]); return <div>{state}<div> };Probar esto.
No sé exactamente lo que está haciendo sin ver su archivo Symbol.js . Pero una mirada rápida probablemente muestre que no debería desestructurar el tipo como const DrawSymbol = ({type}) => { ... rest of the code } si está pasando el tipo como accesorios a este componente.? De lo contrario, en realidad está utilizando el método de búsqueda incorrectamente. El método Find encuentra el primer elemento que coincide de acuerdo con la condición dada. Aquí, en realidad, está regresando directamente, lo que obviamente devolvería falso, ya que no está dando ninguna condición mediante la cual lo encontraría dentro de la matriz. La forma correcta sería -
useEffect(() => { if(type) { const g = symbols.find((obj) => obj.type === type); setState(g.text); } }, [type]);Aquí, en el código anterior, devolvería exactamente lo que necesita, ya que aquí estamos dando la condición mediante la cual coincidiría dentro de la matriz.
Puedes resolver esto con useMemo :
import { useMemo } from "react"; import symbols from "./Symbols.js"; const DrawSymbol = ({type}) => { const symbolText = useMemo(() => symbols.find(s => s.type === type)?.text ?? '', [type]); return <div>{symbolText}<div>; };