Hola, estoy trabajando en una función de mención de usuario ahora. Tengo un problema que no puedo reemplazar el texto
Si estoy tratando de encontrar un usuario con "@", no puedo encontrar un usuario, por eso reemplazo el texto.
const handleInputComment = (e: React.ChangeEvent<HTMLInputElement>) => { setCommentValue({ ...commentValue, comment: e.target.value }); e.target.value.split(" ").map((text) => { if (text.startsWith("@")) { text.replace("@", ""); setMentionSearchValue(text); console.log(mentionSearchValue); return setIsMentionModalOpen(true); } return setIsMentionModalOpen(false); }); };cuando veo el archivo console.log lo que veré será como @asdfsdf @sadfasfsaf @asdfjaskfjfkjf
¿Cómo reemplazar el texto? gracias por leer mi pregunta.
Haz eso en su lugar:
const handleInputComment = (e: React.ChangeEvent<HTMLInputElement>) => { setCommentValue({ ...commentValue, comment: e.target.value }); e.target.value.split(" ").map((text) => { if (text.startsWith("@")) { setMentionSearchValue(text.replace("@", "")); console.log(mentionSearchValue); return setIsMentionModalOpen(true); } return setIsMentionModalOpen(false); }); };Reemplazar devuelve el texto reemplazado y no actualiza la variable. A la variable de texto no se estaba actualizando.
La función Javascript String Replace es inmutable, por lo tanto, no cambiará el valor del texto en sí, sino que devolverá un nuevo valor. Pero el problema con replace es que reemplazará todas las ocurrencias, si está interesado en deshacerse solo de la primera @ , puede usar el método de slice . Otro problema es que está imprimiendo el valor de estado justo después de llamar a setState, es decir, setMentionSearchValue , pero setState es una función asíncrona, por lo que no verá el nuevo valor en la consola inmediatamente después de llamar a setState. Si desea imprimir su valor después de que se actualice el valor de mentionSearchValue de mención, debe usar el gancho useEffect .
const handleInputComment = (e: React.ChangeEvent<HTMLInputElement>) => { setCommentValue({ ...commentValue, comment: e.target.value }); e.target.value.split(" ").map((text) => { if (text.startsWith("@")) { // text.replace("@", ""); setMentionSearchValue(text.slice(1)); // console.log(mentionSearchValue); return setIsMentionModalOpen(true); } return setIsMentionModalOpen(false); }); };