当我将函数传递给子组件时，ReactJS this.props.* 不是函数

Question

我编写消息传递应用程序。当我从子组件调用传递的函数时，出现以下错误：
类型错误：this.props.createNewChat 不是函数。类型错误：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

你的组件中没有这样的属性

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

当我将函数传递给子组件时，ReactJS this.props.* 不是函数

ReactJS this.props.* is not a function when I pass a function to child component

javascript

reactjs

react-component