En mi componente de reacción al hacer clic en un botón, estoy pasando un parámetro a mi controlador de clics exactamente así
<a id={`_primaryAction_${messageObject.id}`} href="#" class='message' onClick={(e: MouseEvent) => this.handleClick(e, messageObject) } >Tengo un caso de uso en el que mis accesorios están cambiando y se está reproduciendo. por lo tanto, en cada nuevo renderizado, este controlador de clics creará una nueva instancia. Hay alguna manera de evitar esto ?
Editado: se eliminó la identificación y se pasó wholeObject ya que es mi caso de uso. Sí, esto está en bucle. Esta etiqueta se creará para la matriz de mensajes.
En primer lugar, investigue más para ver si la reproducción es realmente motivo de preocupación, ya que podría no ser tan importante en cuanto al rendimiento.
Como solución, podría crear otro componente al que le pase el objeto.
const ActionLink = (props) => { const { handleClick, messageObject, ...otherProps } = props; const clickHandler = React.useCallback((e: MouseEvent) => { handleClick(e, messageObject); }, [handleClick, messageObject]); return <a {...otherProps} onClick={ clickHandler } />; } export default ActionLink; Y en su caso, puede usarlo como el siguiente ( en lugar de la a )
<ActionLink id={`_primaryAction_${messageObject.id}`} href="#" class="message" messageObject={messageObject} handleClick={this.handleClick} >...</ActionLink> Y si es necesario, puede protegerse aún más contra los renderizados pasándolo a través React.memo
export default React.memo(ActionLink); Por último, como alternativa, puede hacer lo que otros han sugerido y proporcionar la id a un atributo del enlace, y usar eso dentro del método handleClick para recuperar el mensaje correcto de la lista.
algo como
<a id={`_primaryAction_${messageObject.id}`} href="#" class='message' data-message-id={messageObject.id} onClick={this.handleClick} > y en tu handleClick
handleClick(e){ const messageId = e.target.getAttribute('data-message-id'); // assuming your message list is named messageList // adjust accordingly const message = messageList.find(({ id }) => id === messageId); // ... do what you were already doing with the message here }pago useCallback
useCallback devolverá una versión memorizada de la devolución de llamada que solo cambia si una de las dependencias ha cambiado. Esto es útil cuando se pasan devoluciones de llamada a componentes secundarios optimizados que se basan en la igualdad de referencia para evitar representaciones innecesarias.
Creo que estás usando un componente de clase.
dado que desea pasar un objeto que creo que viene dinámicamente y no una constante en el componente (es decir, el objeto es parte de un mapa) y tampoco desea crear una nueva función en cada representación, le sugiero que establezca el valor del atributo de su botón como el valor de su objeto y puede acceder a él e.target.value y vincular el método que usando la devolución de llamada en línea
y no creará una nueva función ahora aquí está el ejemplo de trabajo