[英]ReactJS this.props.* is not a function when I pass a function to child component
I write messaging app.我写消息应用程序。 When I call the passed functions from the child component, I get the following errors:当我从子组件调用传递的函数时,出现以下错误:
TypeError: this.props.createNewChat is not a function.类型错误: this.props.createNewChat不是 function。 TypeError: this.props.chooseChat is not a function.类型错误: this.props.chooseChat不是 function。
I looked through many topics, tried what I could try and nothing worked.我浏览了许多主题,尝试了我可以尝试的方法,但没有任何效果。 Will be grateful for any suggestions as I'm a beginner in coding.将不胜感激任何建议,因为我是编码的初学者。
Here are parts of my code: Parent component:以下是我的部分代码: 父组件:
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
});
}
Child component:子组件:
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;
You are passing them as newChat
and select
您将它们作为newChat
和select
<ChatListComponent
newChat={this.createNewChat}
select={this.chooseChat}>
so these are the names of the properties in the ChatListComponent
所以这些是ChatListComponent
中属性的名称
You should access them as this.props.newChat
and this.props.select
您应该以this.props.newChat
和this.props.select
的形式访问它们
newChat = () => {
this.props.newChat();
}
select = (index) => {
this.props.select(index);
}
You don't have such a property in your component您的组件中没有这样的属性
<ChatListComponent
newChat={this.createNewChat}
select={this.chooseChat}>
history={this.props.history}
chats={this.state.chats}
userEmail={this.state.email}
selectedChatIndex={this.state.selectedChat}>
Your property is newChat
and not createNewChat
You need to change the button's onClick to call the properties' method您的属性是newChat
而不是createNewChat
您需要更改按钮的 onClick 以调用属性的方法
<button className='newChatButton'
onClick={this.props.newChat}>
New Chat</button>
</main>
and和
onClick={() => this.props.select(_index)}
You should use你应该使用
this.props.newChat instead of this.props.createNewChat & this.props.newChat 而不是 this.props.createNewChat &
this.props.select instead of this.props.chooseChat this.props.select 而不是 this.props.chooseChat
because You are passing them as newChat and select因为您将它们作为 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>
In child component在子组件中
newChat = () => {
this.props.newChat();
}
select = (index) => {
this.props.select(index);
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.