Estoy tratando de crear un chat-bot con algunas características adicionales como enviar y recibir audio de voz. Usé dos estados de matriz diferentes para representar los mensajes de texto y los mensajes de audio. En la sección de renderizado, mapeo estas matrices por separado.
setMessageList((prevlist) => [...prevlist, {id: uuidv4(), message: currentMessage, type: "sender",}, {id: uuidv4(), message: "response.data.data.answer", type:"reciever"}]); setAudioList(prevState => [ ...prevState, {id: uuidv4(), audio: audioUrlQuestion, type: "sender", isLoading: isLoadedVoice} , {id: uuidv4(), audio: result.data.filePath , type: "reciever", isLoading: isLoadedVoice} ]) {audioList.map(item => { if (item.type === "sender") { //render sender audio tag } if (item.type === "reciever" && isLoadedVoice === false) { // ... } else if (item.type === "reciever" && isLoadedVoice === true) { // } })} {messageList.map((item) => { if (item.type === "sender") { //show sender messages } if (item.type === "reciever" && isLoadedMessage === false) { // show received mesgs } else if (item.type === "reciever" && isLoadedMessage === true) { // } })} Sin embargo, todo funciona en el orden correcto solo cuando el usuario simplemente envía mensajes de audio/texto sin ningún cambio. Por ejemplo, si su primer mensaje es de audio y el segundo es de texto, cuando desee enviar el tercer mensaje que es de tipo audio nuevamente, debería mostrar el audio después del mensaje de texto. Pero no es así. En cambio, aparecerá después del primer mensaje de audio (antes del de texto).
Entonces, ¿cómo puedo representar los mensajes de voz y los mensajes de texto en el orden correcto tras otro?
Es una clasificación (restricciones: ~ complejidad de registro para cada procesamiento, necesita marcas de tiempo), o ponerlos juntos en la misma matriz de estado, es decir
const [allMessages, setAllMessages] = useState([]); ... setAllMessages([...allMessages, {type: "audio", item: {id: uuidv4(), audio: audioUrlQuestion, type: "sender", isLoading: isLoadedVoice}}, {type: "audio", item: {id: uuidv4(), audio: result.data.filePath , type: "reciever", isLoading: isLoadedVoice}}]); ... setAllMessages([...allMessages, {type: "text", item: {id: uuidv4(), message: currentMessage, type: "sender",}}, {type: "text", item: {id: uuidv4(), message: "response.data.data.answer", type:"reciever"}}]); ... {allMessages.map(({type, item}) => { if (type === "audio") { if (item.type === "sender") { //render sender audio tag } if (item.type === "reciever" && isLoadedVoice === false) { // ... } else if (item.type === "reciever" && isLoadedVoice === true) { // } } else if (type === "text") { if (item.type === "sender") { //show sender messages } if (item.type === "reciever" && isLoadedMessage === false) { // show received mesgs } else if (item.type === "reciever" && isLoadedMessage === true) { // } } })}Aquí está la manera simple,
const audio = [{ message: "Audio 1", time: 1 }, { message: "Audio 1", time: 3 }, ]; const message = [{ mesage: "Text 1", time: 2 }]; [...audio,...message].sort(( a, b )=> { if ( a.time < b.time ){ return -1; } if ( a.time > b.time ){ return 1; } return 0; }).map((item)=> console.log(item))