當我將 function 傳遞給子組件時，ReactJS this.props.* 不是 function

Question

我寫消息應用程序。 當我從子組件調用傳遞的函數時，出現以下錯誤：
類型錯誤： this.props.createNewChat不是 function。 類型錯誤： this.props.chooseChat不是 function。

我瀏覽了許多主題，嘗試了我可以嘗試的方法，但沒有任何效果。 將不勝感激任何建議，因為我是編碼的初學者。

以下是我的部分代碼： 父組件：

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

您的組件中沒有這樣的屬性

        <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)} 

Answer 3

你應該使用

this.props.newChat 而不是 this.props.createNewChat &

this.props.select 而不是 this.props.chooseChat

因為您將它們作為 newChat 和 select

  <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);
       }