[英]Why am I getting a cannot read property props error for my function passed to a child?
So I have a button which updates an array stored in my back-end, I need that button to also update the state of my front-end with the new array from the back-end.所以我有一个按钮来更新存储在我的后端的数组,我需要这个按钮来更新我前端的 state 与后端的新数组。 I am passing a function which changes the state of the parent to the button but when I try to call that function with this.props.function() I get a TypeError: Cannot read property 'props' of undefined.
我正在传递一个 function ,它将父级的 state 更改为按钮,但是当我尝试调用该 function 时,无法使用 this.props.function()
I have another button which uses basically the same code(except this one I call the passed function inside another function which I bind to onClick) and works perfectly fine so I am confused as to why this one is not working.我有另一个按钮,它使用基本相同的代码(除了这个我在另一个 function 中调用传递的 function ,我绑定到 onClick)并且工作得很好,所以我很困惑为什么这个不工作。
Parent:家长:
//within constructor
this.onUpdateRooms = this.onUpdateRooms.bind(this);
//function
onUpdateRooms(list) {
this.setState({roomList: list});
console.log(this.state.roomList);
}
//within render
<GenerateButton onUpdateRooms={this.onUpdateRooms}/>
Button按钮
//within the class declaration
constructor (props) {
super(props)
}
onCreateNewRoom() {
const newRoomCode = GenerateRandomCode.TextCode(6).toUpperCase();
console.log(newRoomCode);
let temp;
fetch('/api/newRoom', {
method: "post",
headers: {
'Accept': 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify({roomCode: newRoomCode})
})
.then(res => res.json())
.then(list => temp=list);
this.props.onUpdateRooms(temp);
}
//then i set the button's onClick={this.onCreateNewRoom}
I can't seem to figure out whats wrong.我似乎无法弄清楚出了什么问题。 I've been deleting and adding things for the last 2 hours.
在过去的 2 个小时里,我一直在删除和添加内容。 Help would be greatly appreciated:)
帮助将不胜感激:)
you also need to call bind
on onCreateNewRoom
您还需要在
onCreateNewRoom
上调用bind
constructor (props) {
super(props);
this.onCreateNewRoom = this.onCreateNewRoom.bind(this);
}
you could also use arrow functions to avoid re-binding this
and this kind of mistakes:您还可以使用箭头函数来避免重新绑定
this
错误和此类错误:
onCreateNewRoom = () => {
So this
inside of onCreateNewRoom
will be bound to the class and not the onClick
handler function.因此
onCreateNewRoom
this
内部将绑定到 class 而不是onClick
处理程序 function。
The bind() method creates a new function that, when called, has its this keyword set to the provided value, with a given sequence of arguments preceding any provided when the new function is called.
bind() 方法创建一个新的 function,当调用它时,它的 this 关键字设置为提供的值,在调用新的 ZC1C425268E68385D1AB5074C17A94F1 时,给定的 arguments 序列在任何提供的序列之前。
In the constructor this
is bound to the class.在构造函数中
this
绑定到 class。 When you call this.onCreateNewRoom.bind(this)
you are setting this
inside of the onCreateNewRoom
to the value you pass as the first argument to bind
.当您调用
this.onCreateNewRoom.bind(this)
时,您正在将onCreateNewRoom
内部的this
设置为您作为第一个参数传递给bind
的值。 (Which is the this
bound to the class and contains props
). (
this
是绑定到 class 并包含props
的 this )。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.