javascript - 第二个组件无法重新加载数据

Question

嗨，我在使用 reactjs 重新加载父组件中的第二个组件时遇到问题。我有一些 3 文件 1 父组件 2 子组件来制作简单的聊天网站。问题是当我第二次单击聊天列表时，我的组件聊天室没有重新加载/更改数据。

这是我的 parent.js

import React, { useContext } from 'react'
import $ from 'jquery'
import Wrapper from '../components/wrapper'
import ChatList from './chat-list'
import ChatRoom from './chat-room'

export default class extends React.Component {
    constructor(props) {
        super(props)

        this.state = {
            login: 0,
            user: null,
            tokenChat: '',
            roomChat: '',
            isToken: false
        }

        this.clickChat = this.clickChat.bind(this)
    }

    componentDidMount() {
        $('body').addClass('menu-position-side menu-side-left')
    }

    componentWillUnmount() {
        $('body').removeClass('menu-position-side menu-side-left')
    }

    clickChat(token, room) {
        let self = this

        self.setState({
            tokenChat: token,
            roomChat: room,
            isToken: true
        })
    }

    render() {
        return (
            <Wrapper {...this.props} title="Dashboard" selected="dashboard" padding={false}>
                {this.state.login == 1 &&
                    <div className="content-i">
                        <div className="content-box">
                            <div className="full-chat-w">
                                <div className="full-chat-i">
                                    <div className="full-chat-left">
                                        <div className="os-tabs-w">
                                            <ul className="nav nav-tabs upper centered">
                                                ...
                                            </ul>
                                        </div>
                                        <ChatList clickChat={this.clickChat} />
                                    </div>

                                    <div className="full-chat-middle">
                                        {
                                            this.state.isToken == false ? 
                                            null
                                            :
                                            <ChatRoom token={this.state.tokenChat} room={this.state.roomChat} />
                                        }
                                    </div>
                                    <div className="full-chat-right">
                                        <div className="user-intro">
                                            <div className="avatar"><img alt="" src="/static/doctor-theme/img/avatar1.jpg" /></div>
                                            <div className="user-intro-info">
                                                <h5 className="user-name">John Mayers</h5>
                                                <div className="user-sub">San Francisco, CA</div>
                                                <div className="user-social"><a href="#"><i className="os-icon os-icon-twitter"></i></a><a href="#"><i className="os-icon os-icon-facebook"></i></a></div>
                                            </div>
                                        </div>
                                        <div className="chat-info-section">
                                            <div className="ci-header"><i className="os-icon os-icon-documents-03"></i><span>Shared Files</span></div>
                                            <div className="ci-content">
                                                <div className="ci-file-list">
                                                    <ul>
                                                        <li><a href="#">Annual Revenue.pdf</a></li>
                                                        <li><a href="#">Expenses.xls</a></li>
                                                        <li><a href="#">Business Plan.doc</a></li>
                                                    </ul>
                                                </div>
                                            </div>
                                        </div>
                                        <div className="chat-info-section">
                                            <div className="ci-header"><i className="os-icon os-icon-documents-07"></i><span>Shared Photos</span></div>
                                            <div className="ci-content">
                                                <div className="ci-photos-list">
                                                    <img alt="" src="/static/doctor-theme/img/portfolio9.jpg" />
                                                    <img alt="" src="/static/doctor-theme/img/portfolio2.jpg" />
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                }
            </Wrapper>
        )
    }
}

请帮忙谢谢。

标签： javascriptreactjs