javascript 类型错误：this.props.function 不是函数
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/48263422/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
TypeError: this.props.function is not a function
提问by A.S.J
First of all, I would like to say that I know there are many questions regarding this topic. I read through most of them and I double and triple checked my code but I can't seem to get it to work.
首先，我想说，我知道关于这个话题有很多问题。我通读了其中的大部分内容，对代码进行了两次和三次检查，但似乎无法使其正常工作。
I have the following child component, which contains an image, which you can change by clicking on said image (you can iterate through an array of 5 images).
我有以下子组件，其中包含一个图像，您可以通过单击所述图像来更改该图像（您可以遍历 5 个图像的数组）。
export default class Images extends React.Component {
constructor(props) {
super(props);
this.changeIcon = this.changeIcon.bind(this);
this.state = {pointer: this.props.id-1, imgs: props.imgs };
}
changeIcon () {
const {length} = this.state.imgs;
const {pointer } = this.state;
const newPointer = pointer === length - 1 ? 0 : pointer+1;
this.setState({ pointer: newPointer });
this.props.onChangeIcon("I work");
}
render() {
const isclicked = this.props.clicked;
const { pointer, imgs } = this.state;
return(
<img src={imgs[pointer]} onClick={this.changeIcon}/>
);
}
}
This is the parent component:
这是父组件：
import Images from "./images";
class Displayer extends React.Component {
constructor(props) {
super(props);
this.changeIcons = this.changeIcons.bind(this);
this.state = {
imgs = [link1, link2, link3, link4, link5]
}
}
changeIcons(word) {
console.log(word);
}
render () {
return (
<div>
<Images onChangeIcon={this.changeIcons} imgs={this.state.imgs}/>
</div>
)
}
}
The weird thing is, that it works perfectly fine with another function inside the same child component. I used the same structure and I also double-checked for any spelling mistakes, but nothing helped.
奇怪的是，它与同一子组件内的另一个函数完美配合。我使用了相同的结构，并且还仔细检查了任何拼写错误，但没有任何帮助。
I still receive the same error message TypeError: this.props.changeIcon is not a function. Am I missing something? Can anyone spot a mistake?
我仍然收到同样的错误信息TypeError: this.props.changeIcon is not a function。我错过了什么吗？任何人都可以发现错误吗？
Edit: the id-prop is added at another point. In order so keep it simple I did not include that.
编辑：在另一点添加 id-prop。为了保持简单，我没有包括它。
采纳答案by Faly
changeIconsdoesn't belong to props but just a method of your component
changeIcons不属于 props 而只是你的组件的一个方法
Instead of this:
取而代之的是：
<Images onChangeIcon={this.props.changeIcons}
Try this:
试试这个：
<Images onChangeIcon={this.changeIcons}
UPDATE:
更新：
Try to use arrow function in the callback to see where the problem is:
尝试在回调中使用箭头函数查看问题出在哪里：
return (
<img src={imgs[pointer]} onClick={() => this.changeIcon() }/>
);
Or just turn changeIcon into arrow function:
或者只是将 changeIcon 变成箭头函数：
changeIcon = () => {
const {length} = this.state.imgs;
const {pointer } = this.state;
const newPointer = pointer === length - 1 ? 0 : pointer+1;
this.setState({ pointer: newPointer });
this.props.onChangeIcon("I work");
}
render() {
const isclicked = this.props.clicked;
const { pointer, imgs } = this.state;
return(
<img src={imgs[pointer]} onClick={this.changeIcon}/>
);
}
回答by simbathesailor
First thing you have done mistake in constructor function. pass imgs and ids also as you are using in child component. Do it like this
您在构造函数中做错的第一件事。当您在子组件中使用时，也传递 imgs 和 ids。像这样做
import Images from "./images";
class Displayer extends React.Component {
changeIcons = (word) => {
console.log(word);
}
state = {
imgs : ["img1","img2", "img3"],
id: 0,
}
//Here i dont know how you are getting img urls array.Please add your code accordingly
render () {
return (
<div>
<Images imgs={this.state.imgs} onChangeIcon={this.changeIcons} />
</div>
)
}
}
And thats it, now it should work.
就是这样，现在它应该可以工作了。
