React - 对象可在整个组件中访问

Question

所以我正在尝试使用 chatkit，它们具有我们使用的连接功能。

但是我正在尝试获取 currentuser 对象，因此我可以在其他函数中使用它。但是，对象始终未定义，函数也未定义。

我正在使用这个 sdk https://docs.pusher.com/chatkit/reference/javascript

我尝试了 const user 和 this.user。

import React, { Component } from 'react';
import ToggleButton from './ToggleButton';
import ChatBox from './ChatBox';
import { ChatManager, TokenProvider } from '@pusher/chatkit'



class App extends Component {

    constructor(props) {
        super(props);
        this.state = {
            chatbox: true,
            user: ''
        }
        const chatManager = new ChatManager({
            instanceLocator: 'somestring',
            userId: 'JaneLowTeu',
            tokenProvider: new TokenProvider({ url: 'https://us1.pusherplatform.io/services/chatkit_token_provider/v1/somestring/token' })
        })

        this.user = chatManager.connect() // <-- I want to save the object. Tried both this.user and const user =
            .then(currentUser => {

             console.log('Successful connection', currentUser)
                return currentUser;
            })
            .catch(err => {
             console.log('Error on connection', err)
    })
}




    joinRoom = () => {
        this.user.createRoom({ //<- When I click the button i want to createRoom but now it says user is undefined, function is undefined.
              name: 'general',
              private: true,
              addUserIds: ['craig', 'kate']
            }).then(room => {
              console.log(`Created room called ${room.name}`)
            })
            .catch(err => {
              console.log(`Error creating room ${err}`)
            })
    }



    showChatBox = () => {
        console.log(this.state.chatbox);
        if (this.state.chatbox) {
            return (<ChatBox />);
        }
    }

    toggleChatBox = () => {
        this.setState(prevState => ({ chatbox: !prevState.chatbox }))
    }
    render() {
        return (
            <div>
            <div 
            onClick={() => this.joinRoom()}
            >Join Room</div>

            <ToggleButton onClick={this.toggleChatBox}/>
            {this.showChatBox()}
            </div>
            )
    }
}

export default App;

Answer 1

connect returns a Promise not the currentUser:

// Connect does not return the `currentUser`
this.user = chatManager.connect()
  .then(currentUser => {
    // You need to access the `currentUser` here
    console.log('Successful connection', currentUser)
    return currentUser;
  })
  .catch(err => {
    console.log('Error on connection', err)
  })

你快了。您只需要从 then 函数访问 currentUser 并更新您的组件状态：

constructor(props) {
  super(props);
  this.state = {
    chatbox: true,
    user: { }
  }
}

chatManager.connect()
  .then(currentUser => {
    this.setState({
      user: currentUser
    });
    console.log('Successful connection', currentUser);
    return currentUser;
  })
  .catch(err => {
    console.log('Error on connection', err)
  })

然后就可以访问this.state.user:

joinRoom = () => {
  this.state.user.createRoom({
     name: 'general',
     private: true,
     addUserIds: ['craig', 'kate']
   }).then(room => {
     console.log(`Created room called ${room.name}`)
   })
   .catch(err => {
     console.log(`Error creating room ${err}`)
   })
 }

记得将 user 从字符串 ('') 更改为空对象 ({})。

React - 对象可在整个组件中访问

React - Object accessible throughout component

pusher

reactjs

chatkit