javascript - TypeError : this. props.function 不是函数

Question

首先，我想说我知道有很多关于这个话题的问题。我通读了其中的大部分内容，并对我的代码进行了双重和三次检查，但我似乎无法让它工作。

我有以下子组件，其中包含一个图像，您可以通过单击该图像来更改它(您可以遍历 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}/>
        );
    }
}

这是父组件:

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

}

奇怪的是，它与同一个子组件中的另一个函数一起工作得很好。我使用了相同的结构，并仔细检查了任何拼写错误，但没有任何帮助。

我仍然收到相同的错误消息 TypeError: this.props.changeIcon is not a function。我错过了什么吗？谁能发现错误？

编辑:在另一点添加了 id-prop。为了简单起见，我没有包含它。

Answer 1

changeIcons 不属于 props 而只是你组件的一个方法

取而代之的是:

<Images onChangeIcon={this.props.changeIcons}

试试这个:

<Images onChangeIcon={this.changeIcons}

更新:

尝试在回调中使用箭头函数，看看问题出在哪里:

return (
    <img src={imgs[pointer]} onClick={() => this.changeIcon() }/>
);

或者只是把 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}/>
    );
}