Estoy creando una tarjeta que muestra preguntas y hace una solicitud GET a mi servidor y muestra la respuesta a la pregunta formulada.

El CÓDIGO a continuación del componente muestra cómo se realiza la solicitud API

 const ChatBoxIItem = ({ message }) => { const [ans, setAns] = useState(null); getAns(message); async function getAns(message) { if (!message) { return; } st_chat_asked_question = message; let param = { question: message, }; param = JSON.stringify(param); let url; let res_data; try { console.log(param); let curr_data = new Date(); url = `${process.env.REACT_APP_API_URL}/student/question_answer`; res_data = await send_xhr.post(param, url, "application/json"); res_data = JSON.parse(res_data); curr_data = new Date(); let time = curr_data.toLocaleTimeString(); if ( res_data.answers && res_data.answers[0] && res_data.answers[0].score > 0 ) { st_chat_response_data = res_data; console.log(res_data); setAns(res_data.answers[0].answer); } else { } } catch (e) { display_mess("something went wrong", "error", 5000); window.scrollTo(0, 100); console.log(e); return; } } return ( <div className='st-cs-chat-item'> <div className='st-cs-chat-item-header'> <p className='st-cs-chat-item-question'>{message}</p> <p>{ans ? ans : <p>Searching For Answer</p>}</p> </div> </div> ); };

Funciona bien, pero solo para el primer componente cuando se realizan 2 o más solicitudes, cambia el valor del primer estado también a "Buscando ans"

Cuando se hace la primera solicitud

Después de la primera solicitud

Cuando se realiza la segunda solicitud (cambian los estados de ambos componentes) Cómo solucionar este problema No quiero cambiar los estados de los componentes anteriores Necesito que cada uno de ellos sea independiente