Tengo una lista de usuarios de datos que paso a otro componente que obtiene la imagen de cada usuario mapeando la lista.
import { useState, useRef, memo } from 'react' const NewGoalsCon = memo(props => { return ( <> {props.data.map((el) => { // get the user's avatar async function setAvatar () { const url = "http://localhost:3000/api/profile/images" const r = await axios.get(url, { headers: { "user-id": el.user._id, "extension": el.user.avatar.extension } }) return `data:image/${el.user.avatar.extension};base64, ${r.data}` } var avatar if (el.user.avatar) { setAvatar().then(res => avatar = res).catch(err => console.log(err)) } else { avatar = avatarPlaceholder } console.log(avatar) // check if the user has an avatar before you set the avatar constant return ( <> <div className='post-head-info'> <div style={{ display: 'flex', alignItems: 'center' }}> <img src={avatar} alt='' style={{ width: '60px', border: '2px solid #E8E8E8', borderRadius: '12px' }}/> <div style={{ marginLeft: '10px' }}> <h1 style={{ fontFamily: 'Open Sans Medium', fontSize: '20px', marginBottom: '5px' }}>{capitalize(el.user.fName) + ' ' + capitalize(el.user.lName)}</h1> <p style={{ fontSize: '11.5px', color: '#999999' }}>{getMonth(el.date.split(",")[1].trim()) + " " + el.date.split(",")[0] + ", " + el.date.split(",")[2]}</p> </div> </div> </>)})} </>) }) export default NewGoalsCon Mi problema es que el avatar se vuelve a representar cuando uso useState y estoy tratando de configurar el avatar en data:image/${el.user.avatar.extension};base64, ${r.data} donde r.data son la base64. También intenté usar una variable global pero no puedo asignarle r.data . ¡Alguna sugerencia!
La razón por la que el avatar sigue volviéndose a renderizar cuando usa useState es porque React volverá a renderizar el componente cada vez que cambie el estado, y en su código actual llama a setAvatar en cada renderizado, volviendo a renderizar los avatares cada vez. Para solucionar este problema, debe almacenar en caché los avatares usando useState y use useEffect para representar los avatares solo una vez:
import { useState, useRef, memo } from 'react'; const NewGoalsCon = memo((props) => { async function setAvatar(el) { const url = 'http://localhost:3000/api/profile/images'; const r = await axios.get(url, { headers: { 'user-id': el.user._id, extension: el.user.avatar.extension, }, }); return `data:image/${el.user.avatar.extension};base64, ${r.data}`; } const [avatars, setAvatars] = useState([]) useEffect(() => { (async () => { const renderedAvatars = [] for (const el of props.data) { if (el.user.avatar) { renderedAvatars.push(await setAvatar(el)) } else { renderedAvatars.push(avatarPlaceholder) } } setAvatars(renderedAvatars) })() }, []) return ( <> {props.data.map((el, i) => { // check if the user has an avatar before you set the avatar constant return ( <> <div className="post-head-info"> <div style={{ display: 'flex', alignItems: 'center' }}> <img src={avatars[i]} alt="" style={{ width: '60px', border: '2px solid #E8E8E8', borderRadius: '12px', }} /> <div style={{ marginLeft: '10px' }}> <h1 style={{ fontFamily: 'Open Sans Medium', fontSize: '20px', marginBottom: '5px', }} > {capitalize(el.user.fName) + ' ' + capitalize(el.user.lName)} </h1> <p style={{ fontSize: '11.5px', color: '#999999' }}> {getMonth(el.date.split(',')[1].trim()) + ' ' + el.date.split(',')[0] + ', ' + el.date.split(',')[2]} </p> </div> </div> </div> </> ); })} </> ); }); export default NewGoalsCon;Puede encontrar información más detallada en esta publicación que escribí (incluidos otros consejos para su código): https://dialect.so/blog/fetching-an-image-from-a-server-within-map-in-react