Esta es la matriz json que uso.
console.log(materialIngredientDetail) [ { content: "123", functionalList: [ { content: "hi", valueUnit: "42", }, ], }, { content: "35", functionalList: [ { content: "ss", valueUnit: "88", }, ], }, { content: "456", functionalList: [ { content: "minsu", valueUnit: "12", }, ], }, ]; {Valor.unidad de valor} generado dinámicamente Texto del primer botón 42, texto del segundo botón 88, texto del tercer botón 12. Cuando se presionan estos botones, también se emite el valor del contenido.
Y también ejecuté la función onClickModifyContent usando Content.current.click() useRef.
El problema es que cuando se hace clic en un botón con un valor de unidad de valor de 42, el contenido es 123, pero la salida es 456.
const Content = useRef(null); const valueUnit = useRef(null); const onClickModifyContent = (content) => { console.log(content); }; const onClickModifiyValueUnit = (valueUnit) => { Content.current.click(); console.log(valueUnit); }; return ( <> materialIngredientDetail.map((Fields, index) => ( <> <p>{Fields.content}</p> <button style={{"display": "none"}} ref={Content} onClick={() => onClickModifyContent(Fields.content)}></button> </> {Fields.functionalList.map((Value, key) => { return ( <> <p>{Value.valueUnit}</p> <button onClick={() => onClickModifiyValueUnit(Value.valueUnit)}>{Value.valueUnit}</button> </> ) })} )) </> ) No estoy seguro de por qué el contenido es 456 cuando hago clic en el botón con el valor valueUnit 42.
De manera similar, cuando se hace clic en un botón con un valor de unidad de valor de 88, se debe generar 35 Contenido, pero se genera un valor de 456. ¿Por qué diablos estás haciendo esto?
Y extrañamente, el valor de valueUnit normalmente se envía a console.log.
Eso es porque estás usando una sola referencia para todos tus elementos. Eso significa que durante la iteración, cada elemento reemplaza al elemento anterior como el valor de Content.current. Por eso, no importa en qué elemento hagas clic, solo obtienes el último.
Puedes usar algo como esto en su lugar:
ref={(el)=>el && Content.current.push(el)}
Y en la función de clic también puede pasar el índice y hacer esto:
onClick={()=>modifyValueUnit(Value.valueUnit,index)}
const modifyValueUnit = (unit,index) => { Content.current[index].click(); }