valor json de la fruta.
console.log(fruit) [ { content: "apple", information: [ { calorie: "122" }, ], }, { content: "banana", information: [ { calorie: "221" }, ], }, { content: "mango", information: [ { calorie: "52" }, ], }, ]; Cree un botón ejecutando la función de mapa en la información de la fruta.
El botón creado dinámicamente es {valor.caloría} se crea el primer botón 122, el segundo botón 221, el tercer botón 52.
Y el contenido también asigna la función a la fruta y pone {fruta.contenido} como el valor del argumento en el botón.
Y configure useRef para que cuando se haga clic en el botón valor.caloría, también se haga clic en el botón contenido de frutas.
const Content = useRef(null); const Calorie = useRef(null); const onClickContent = (content) => { console.log(content); }; const onClickCalorie = (calorie) => { Content.current.click(); console.log(calorie); }; return ( <> fruit.map((Fields, index) => ( <> <p>{Fields.content}</p> <button style={{"display": "none"}} ref={Content} onClick={() => onClickContent(Fields.content)}></button> </> {Fields.information.map((Value, key) => { return ( <> <p>{Value.calorie}</p> <button onClick={() => onClickCalorie(Value.calorie)}>{Value.calorie}</button> </> ) })} )) </> ) El problema es que cuando hace clic en el 122 que se muestra en el botón, el contenido también se envía a la consola, Apple debería salir, pero Mango sale.
Si hace clic en el botón con la caloría 221, se debe enviar banan, pero se envía mango a la consola. Se dice que esto se debe a una sola referencia.
¿Cómo puedo resolver la función de referencia única? No sé.
Para mí, parece que puede eliminar la referencia, ya que todo lo que se usa actualmente es activar un evento de clic en su primer botón (contenido) cuando hace clic en su segundo botón (calorías). Si ese es el caso, puedes llamar a onClickContent() manualmente dentro de onClickCalorie() . Primero, puede actualizar su onClickCalorie() para pasar los datos que onClickContent() necesita:
<button onClick={() => onClickCalorie(Value.calorie, Fields.content)}>{Value.calorie}</button> Luego, en su onClickCalorie() , actualice los parámetros y llame a onClickContent() manualmente para activar la misma función que activaría si hiciera clic en el botón Contenido:
const onClickCalorie = (calorie, content) => { onClickContent(content); // ... do stuff specific to clicking on the calorie button ... console.log(calorie); };De esta manera, no necesita usar referencias, ya que no necesita referirse explícitamente a ningún elemento DOM.
Si lo único que hace su función onClickCalorie() es llamar/activar onClickContent() , entonces puede eliminar la función onClickCalorie() y llamar a onClickContent() directamente:
<button onClick={() => onClickContent(Fields.content)}>{Value.calorie}</button>De lo contrario, si realmente necesita usar referencias, puede seguir este enfoque en el que puede crear una referencia para cada uno de sus botones:
const contentBtns = useRef([]); y luego dentro de useEffect() actualice el tamaño de la matriz si la matriz de fruit cambia:
useEffect(() => { contentBtns.current = contentBtns.current.slice(0, fruit.length); }, [fruit]); y luego complete la matriz almacenada en contentBtns.current para que cada índice almacene el elemento del botón:
<button style={{"display": "none"}} ref={el => contentBtns.current[index] = el} onClick={() => onClickContent(Fields.content)}> </button> Ahora, cuando llame a onClickCalorie , puede hacer clic en un botón específico según el índice. Deberá pasar el índice a su onClickCalorie() para tener acceso a él:
const onClickCalorie = (calorie, index) => { contentBtns.current[index].click(); console.log(calorie); };