React父子组件传参报错TypeError: this.props.changeIcon is not a function求排查

嘿，我帮你梳理下代码里的问题，你遇到的TypeError: this.props.changeIcon is not a function报错其实有几个明确的诱因，咱们一步步看：

1. 最可能的笔误：props函数名不匹配 #

你报错的信息指向changeIcon不是函数，但看你提供的代码：子组件里调用的是this.props.onChangeIcon("I work")，父组件传递的props也是onChangeIcon={this.changeIcons}——这说明你实际代码的某个地方肯定把onChangeIcon写成了changeIcon（比如子组件里的另一个函数，或者粘贴代码时漏写了on前缀）。

仔细检查子组件里所有调用父组件回调的地方，确保统一使用onChangeIcon这个props名，和父组件传递的保持一致。

2. 父组件的state定义语法错误 #

你的父组件Displayer里初始化state的时候用了等号，这是JavaScript对象语法的错误：

// 错误写法
this.state = { imgs = [link1, link2, link3, link4, link5] }
// 正确写法应该用冒号
this.state = { imgs: [link1, link2, link3, link4, link5] }

这个语法错误会导致父组件初始化失败，进而可能引发props传递异常，必须先修复这个问题。

3. 子组件的pointer初始化风险 #

子组件里pointer的初始值是this.props.id-1，但你提到id属性是在其他地方添加的——如果id没有正确传递（比如变成undefined），那么undefined-1会得到NaN，这会导致imgs[pointer]变成undefined，图片无法正常加载。你可以给它加个默认值兜底：

this.state = {
  pointer: (this.props.id || 1) - 1, // 确保id至少为1，避免NaN
  imgs: props.imgs 
};

先修复上面的语法错误，再仔细核对props函数名的拼写，应该就能解决这个问题了！

内容的提问来源于stack exchange，提问作者A.S.J