Question

我一直在使用react和websockets处理聊天应用程序，我的问题是方法

componetWillUnmount（）当状态改变并且组件重新渲染时，不会调用它。

我一直在尝试为聊天中的每个新消息添加'li'元素到chatArea组件，一旦我选择另一个聊天，我想删除所有那些'li'元素以前的聊天，因为我已经尝试了2件事，一件是删除所有孩子的，或者我正在改变状态。但是没有调用componentWillUnmount。我无法删除li元素。

以下是我的代码

import React from 'react'

export default class ChatArea extends React.Component {
  constructor (props) {
    super(props)
    this.state = {
      currentUser: this.props.currentUser,
      selectedUser: this.props.selectedUser,
      messages: []
    }
    this.handleMessage = this.handleMessage.bind(this)
  }

  handleMessage (obj) {
    let messages = this.state.messages
    messages.push(obj)
    this.setState({
      messages: messages
    })
  }

  componentWillMount () {
    window.socket.on('show message', obj => {
      this.handleMessage(obj)
    })
  }

  componentDidMount () {
    window.socket.emit('join', {
      sender: this.state.currentUser,
      receiver: this.state.selectedUser
    })
  }

  componentWillUnmount () {
    console.log('something')
    const chatList = this.refs.chatList
    while (chatList.hasChildNodes()) {
      console.log('removing children', chatList.lastChild)
      chatList.removeChild(chatList.lastChild)
    }
orrrrrrrrrrrrrr
      this.setState({
        messages: []
      })
  }

  render () {
    console.log('chatARea state', this.state)
    let messages = this.state.messages
    let i = 0
    return (
      <div className='row chat-area'>
        <ul className='col m12' ref='chatList'>
          {messages.map(msg => <li key={i++}>{msg.sentBy.firstname + ': ' + msg.message}</li>)}
        </ul>
      </div>
    )
  }
}

module.exports = ChatArea

Answer 1

我找到了自己问题的答案，组件的状态没有改变，因此方法componentWillMount（）没有被调用。

感谢大家的帮助

React组件将挂载未被调用

1 个答案: