如何在不刷新reactjs頁面的情況下更新狀態

Question

如果后端有任何更改作為 Facebook 中的通知，我想更新我的儀表板。

我有兩頁：

• 用戶發送請求消息的頁面
• 用戶配置文件的頁面，用戶可以在其中查看所有請求消息

如果有新的請求消息，用戶需要刷新用戶配置文件才能看到新消息。 我希望在不刷新頁面的情況下顯示新消息。 這是我的代碼：

在消息頁面中

state = {

    team: {
      message: 'Hi! I would like to join in your team! Please accept my request',
      invitation_message: 'Hi! I would like to invite you to join in my team.',
      email: '',
    },

  }
  // Invite user to a team
  handleInvite = event => {
    event.preventDefault();
    const userObject = JSON.parse(localStorage.getItem('user'));
    const jwt = userObject.jwt;
    const config = {
      headers: { 'Authorization': `bearer ${jwt}` },
    };     
    api
      .post('/teammembers', {
        team: this.state.teaminfo,
        profile: responseData.data[0],
        status: "invited",
        message: this.state.team.invitation_message,
      }, config)
      .then(response => {
        this.setState({
          success_message: true,
        })
        console.log('Success', response);
      })
      .catch(err => {
        console.log('An error occurred:', err);
      });

  }

在用戶個人資料頁面中

export class UserProfile extends React.Component {
import socketIOClient from "socket.io-client";

state = {

    invited_teams:[],
    endpoint: "myurl"

  }
 componentDidMount() {
 const { endpoint } = this.state;
    //Very simply connect to the socket
    const socket = socketIOClient(endpoint);
    socket.on('request', (data) => {
      this.setState({ state: data.requests });
    });
    if (localStorage.getItem('userData')) {
      const userObject = JSON.parse(localStorage.getItem('user'));
      api
        .get(`/profiles/?user=${userObject.user.id}`)
        .then(responseData => {
          this.setState({
            invited_teams: responseData.data
          })
        }
    }      
}

誰能幫我解決這個問題？

Answer 1

使用 socket.IO 庫。 您可以在新請求上設置偵聽器，然后更新狀態。

socket.on('request' , (data) => {
  this.setState({state: data.requests});
});