0

我正在使用 React 和 Chat Kit 构建一个聊天应用程序，但是当我尝试实现我的实时指示器时会出现上述错误。我采取了以下步骤：

我创建了一个无状态组件TypingIndicator.js 

` import React, { Component } from 'react'

class TypingIndicator extends Component {
  render() {
if (this.props.usersWhoAreTyping.length > 0) {
  return (
    <div>
      {`${this.props.usersWhoAreTyping
        .slice(0, 2)
        .join(' and ')} is typing`}
    </div>
  )
}
return <div />
 }
}

 export default TypingIndicator`

然后，我将上面的无状态组件连接到ChatScreen.js 一个容器组件，该组件管理我的应用程序状态并使用演示组件（通常是无状态组件）呈现 UI

`import React, { Component } from 'react'
 import Chatkit from '@pusher/chatkit-client'
 import MessageList from './components/MessageList'
 import SendMessageForm from './components/SendMessageForm'
 import TypingIndicator from './components/TypingIndicator'
 import WhosOnlineList from './components/WhosOnlineList'

 class ChatScreen extends Component {
  constructor(props) {
   super(props)
  this.state = {
  currentUser: {},
  currentRoom: {},
  messages: [],
  usersWhoAreTyping: [],
}
this.sendMessage = this.sendMessage.bind(this)
this.sendTypingEvent = this.sendTypingEvent.bind(this)
}


sendTypingEvent () {
  this.state.currentUser
  .isTypingIn({ roomId: this.state.currentRoom.id })
  .catch(error => console.error('error', error))
 }

sendMessage(text) {
this.state.currentUser.sendMessage({
  text,
  roomId: this.state.currentRoom.id,
 })
}

componentDidMount () {
const chatManager = new Chatkit.ChatManager({
   instanceLocator: 'v1:us1:aef97d23-a9e1-4eea-955f-3c8a02c98525',
   userId: this.props.currentUsername,
   tokenProvider: new Chatkit.TokenProvider({
    url: 'http://localhost:3001/authenticate',
   }),
 })

chatManager
  .connect()
  .then(currentUser => {
     return currentUser.subscribeToRoom({
      roomId: "19375754",
      messageLimit: 100,
      hooks: {
        onMessage: message => {
          this.setState({
            messages: [...this.state.messages, message],
          })
        },
        onUserStartedTyping: user => {
          this.setState({
            usersWhoAreTyping: [...this.state.usersWhoAreTyping, user.name],
         })
        },
        onUserStoppedTyping: user => {
          this.setState({
            usersWhoAreTyping: this.state.usersWhoAreTyping.filter(
              username => username !== user.name
            ),
          })
        },
        onPresenceChange: () => this.forceUpdate(),
        onUserJoined: () => this.forceUpdate(),
      },
    })
  })
  .then(currentRoom => {
    this.setState({ currentRoom })
   })
  .catch(error => console.error('error', error))
  }

  render() {
   const styles = {
    container: {
    height: '100vh',
    display: 'flex',
    flexDirection: 'column',
  },
  chatContainer: {
    display: 'flex',
    flex: 1,
  },
  whosOnlineListContainer: {
    width: '300px',
    flex: 'none',
    padding: 20,
    backgroundColor: '#2c303b',
    color: 'white',
  },
  chatListContainer: {
    padding: 20,
    width: '85%',
    display: 'flex',
    flexDirection: 'column',
  },
 }

return (
  <div style={styles.container}>
    <div style={styles.chatContainer}>
      <aside style={styles.whosOnlineListContainer}>
        <WhosOnlineList
          currentUser={this.state.currentUser}
          users={this.state.currentRoom.users}
        />
      </aside>
      <section style={styles.chatListContainer}>
          <MessageList
         messages={this.state.messages}
         style={styles.chatList}
        />
       <TypingIndicator usersWhoAreTyping={this.state.usersWhoAreTyping} />
       <SendMessageForm onSubmit={this.sendMessage}
        onChange={this.sendTypingEvent}
        />
      </section>
    </div>
  </div>
  )
 }
}

export default ChatScreen
4

1 回答 1

0

那是因为不是函数。您在开始时将 currentUser 设置为空对象，并且 isTypingIn 中没有任何功能。您应该将 isTypingIn 声明为该类的方法并在任何您想要的地方使用它。当尚未声明 isTypingIn() 作为函数时，您想实现什么令人困惑。

于 2018-12-11T16:12:03.283 回答