ReactJS this.props. * Не является функцией, когда я передаю функцию дочернему компоненту

Question

Я пишу приложение для обмена сообщениями. Когда я вызываю переданные функции из дочернего компонента, я получаю следующие ошибки: TypeError: this.props.createNewChat не является функцией. TypeError: this.props.chooseChat не является функцией.

Я просмотрел много тем, пробовал все, что мог, и ничего не помогло. Буду благодарен за любые предложения, так как я новичок в программировании.

Вот части моего кода: Родительский компонент:

class DashboardComponent extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      chats: [],
      email: null,
      selectedChat: null,
      chatVisible: true
    }
    this.createNewChat = this.createNewChat.bind(this);
    this.chooseChat = this.chooseChat.bind(this);
  }
  
  render () {
    return (
      <main className='dashboard-cont'>
        <div className='dashboard'>
          
            <ChatListComponent 
              newChat={this.createNewChat}
              select={this.chooseChat}>

              history={this.props.history}
              chats={this.state.chats} 
              userEmail={this.state.email}
              selectedChatIndex={this.state.selectedChat}>
            </ChatListComponent>                         
        </div>
      </main>
    )
  }

  createNewChat = () => {
    this.setState({
      chatVisible: true,
      selectedChat: null
    });
  }

  chooseChat = async(index) => {
    await this.setState({
      selectedChat: index,
      chatVisible: true
    });
  }

Дочерний компонент:

class ChatListComponent extends React.Component {
    constructor(props) {
        super(props);
        this.select = this.select.bind(this);
        this.newChat = this.newChat.bind(this);
  }
    render () {

    if(this.props.chats.length > 0) {
        return (
        <main className='listOfChats'>
            {
                this.props.chats.map((_chat, _index) => {
                    return (
                        <div key={_index}>
                            <div className='chatListItem' 
                            onClick={() => this.select(_index)} 
                            selected={this.props.selectedChatIndex === _index}>
                                
                                <div className='avatar-circle'>
                                    <h1 className='initials'>{_chat.users.filter(_user => _user = this.props.userEmail)[1].split('')[0]}</h1>
                                </div>
                                
                                <div className='text'>
                                    <p id='textLine1'>{_chat.users.filter(_user => _user = this.props.userEmail)[1]}</p>
                                    <br></br>
                                    <p>"{_chat.messages[_chat.messages.length - 1].message.slice(0, 25)}..."</p>
                                </div>
                            </div>
                        </div>
                    )
                })
            }  
            <button className='newChatButton'
                onClick={this.newChat}>
                New Chat</button>  
            </main>   
         );      
        } else {
            return (
                <button className='newChatButton'
                onClick={this.newChat}>
                New Chat</button> 
            );
        }
  }

newChat = () => {
  this.props.createNewChat();
}

select = (index) => {
   this.props.chooseChat(index);
 }
};

export default ChatListComponent;

Answer 1

Вы передаете их как newChat и select

<ChatListComponent 
          newChat={this.createNewChat}
          select={this.chooseChat}>

, так что это имена свойств в ChatListComponent

Вы должны получить к ним доступ как this.props.newChat и this.props.select

newChat = () => {
  this.props.newChat();
}

select = (index) => {
  this.props.select(index);
}

Answer 2

Вы должны использовать

this.props.newChat вместо this.props.createNewChat &

this.props.select вместо this.props.chooseChat

, потому что Вы передаете их как newChat и выбираете

  <ChatListComponent 
          newChat={this.createNewChat}
          select={this.chooseChat}>

          history={this.props.history}
          chats={this.state.chats} 
          userEmail={this.state.email}
          selectedChatIndex={this.state.selectedChat}>
        </ChatListComponent>   

в дочернем компоненте

        newChat = () => {
         this.props.newChat();
        }

      select = (index) => {
        this.props.select(index);
       }

Answer 3

У вас нет такого свойства в вашем компоненте

        <ChatListComponent 
          newChat={this.createNewChat}
          select={this.chooseChat}>

          history={this.props.history}
          chats={this.state.chats} 
          userEmail={this.state.email}
          selectedChatIndex={this.state.selectedChat}>

Ваше свойство newChat, а не createNewChat Вам необходимо изменить onClick кнопки, чтобы вызвать метод свойств

        <button className='newChatButton'
            onClick={this.props.newChat}>
            New Chat</button>  
        </main>   

и

onClick={() => this.props.select(_index)}