Блог

В моем приложении для чата у меня возникают проблемы с отображением сообщений пользователей после нажатия кнопки «Отправить».

Я получаю все данные сообщений из API и сохраняю их в состоянии. Вот соответствующая часть.

Я упростил код, потому что думаю, что проблема в логике моего кода и в нем нет синтаксических ошибок.

 const Chat = (props) => {
  const [selectedRoom, setSelectedRoom] = useState({})
  const [roomMessages, setRoomMessages] = useState([])
  let roomMessagesData = []
  
  function getUserRoomMessages() {
     fetch("url").then((response) => {
        return response.json();
     }).then((requestData) => {
        setRoomMessages(requestData.message_list)
     });
  };
  
  function sendMessage(message) {
     fetch("url").then((response) => {
        return response.json();
     }).then((requestData) => {
        getUserRoomMessages()
     });
  } 

  function handleSendMessageButton() {
     let currentMsg = document.querySelector("#textBox").value;
     if (currentMsg != "") {
        sendMessage(currentMsg)
        roomMessagesData.push(
          <div className="message receiver">{currentMsg}</div>
        )
     }
     document.querySelector("#textBox").value = "";
  }

  useEffect(() => {
     getUserRoomMessages()
  }, [selectedRoom])

  // Note that: 
  // typeof roomMessages !== 'undefined' will always be true,
  // since initially, roomMessages = [], it is defined.
  // Instead just check if roomMessages is not empty, to avoid this operation.
  
  if (roomMessages.length > 0) {
  
     const sortedMessages = roomMessages.sort(
        (a,b)=> a.message_id > b.message_id ? 1 : -1
     );
     for (let i = 0; i<sortedMessages.length; i  ) {
        if (sortedMessages[i].creator_id == user_id) {
           roomMessagesData.push(
              <div className="message receiver">
                {sortedMessages[i].message_text}
              </div>
           );
        } else {
           roomMessagesData.push(
              <div className="message sender"> 
                {sortedMessages[i].message_text}
              </div>
           );
        }
     };
  }
  
  return (
     <div>
       //some code
       <div className="chatBox">{roomMessagesData}</div>
       <div><input type="text" id="textBox"/></div>
       <div>
         <input
            id="btn"
            type="button"
            value="Send message" 
            onClick={handleSendMessageButton}
         />
       </div>
     </div>
  )
}
 

В этой текущей логике, когда я нажимаю кнопку отправить сообщение, сообщение успешно отправляется в API, но не отображается. Только после того, как я обновлю страницу, появится новое сообщение.

Все вызовы API завершены успешно. Моя идея заключается в том, что, когда пользователь отправляет новое сообщение, я получаю недавно обновленный список сообщений из API, которые затем должны быть повторно отрисованы reactjs . Или я хочу подтолкнуть новый элемент roomMessagesData так, чтобы после его изменения reactjs следовало перезагрузить его элементы.

Вопрос в том, в чем проблема в моем коде и что я должен сделать, чтобы достичь того, что я описал выше.

Прямо сейчас вы определили свой список с помощью переменной let roomMessagesData = [] ,в то время как для его определения вам нужно использовать состояние. позже , когда вы измените это состояние, ваш компонент будет обновлен с момента изменения состояния. другой способ-развернуть крючок useEffect, в котором вы будете проходить roomMessagesData как вторая зависимость. Таким образом , когда этот массив изменится, ваш компонент будет повторно отправлен.

 useEffect(() => {
       const copyRoomMessagesData = [...roomMessagesData]
  }, [roomMessagesData])
 

 <div className="chatBox"> 
         {copyRoomMessagesData}
       </div>
 

Краткий обзор шагов:

• Таким handleSendMessageButton образом, запускается sendMessage функция, которая выполняет a POST .
• А затем sendMessage запускает GET сообщение с помощью getUserRoomMessages .
• Внутри getUserRoomMessages вы запускаете обновление состояния с помощью setRoomMessages .
• И отображаемый ребенок {roomMessagesData} зависит от изменений в roomMessages состоянии.

Исходя из вышесказанного, проблема, которую необходимо устранить, находится здесь:

 // ONLY re-renders if selectedRoom changes
useEffect(() => { getUserRoomMessages() }, [selectedRoom]);
 

Измените вышеизложенное на:

 // re-render if roomMessages changes,
// and the message should display automatically
useEffect(() => { getUserRoomMessages() }, [roomMessages]);
 

Помните, что useEffect() это повторится только в том случае, если изменятся определенные «зависимые» состояния.

Обновить

Несмотря на предложение выше, обратите внимание, что он создаст infinite loop , потому что — getUserRoomMessages вызовет вызов API, а затем обновит roomMessages состояние, от которого useEffect зависит повторная визуализация компонента, что приведет к бесконечной повторной визуализации и многочисленным вызовам API.

Предложение:

Так getUserRoomMessages как уже вызывается при onClick срабатывании, таким образом, дата обновления… вместо этого вы можете использовать эффект использования для запуска только при обновлении состояния, например

 let loaded = React.useRef(false); 

// Cleanup useEffect
useEffect(() => {
  // set to true on mount...
  isLoaded.current = true;
  // ... and to false on unmount
  return () => { isLoaded.current = false; };
}, [isLoaded, roomMessages]);