递归渲染,加了bind(this)函数后好了?

#1
本周遇到递归渲染的问题,然后在函数上加了bind(this)后,好使了。想问下是什么原因?

大致代码如下:
文件1:

 return(<div>
    <BottomCarousel
      goodList={this.props.goodList}
      goodMsg={this.props.goodMsg}
      dispatch={this.props.dispatch}
    />
</div>)

文件2

changeData= (item) => {
  this.props.dispatch({
    type:'test/saveGoodMsg',
    payload:item,
  });
};

render() {
  return (
    <div >
      {
          <ul>
            {
              goodList.map((item, index) => {
                return (
                  <li key={index} onClick={this.changeData.bind(this,item)}   className= 
                 {this.props.goodMsg.id===item.id?styles.box_active:styles.box}>
                    <p >{item.title}</p>
                    </div>
                  </li>
                );
              })
            }
          </ul>
      }
    </div>
}
#2

this指向问题啊,详细的你可以去看bind,call,apply。

#3

文件二没有继承文件一,可以在文件二加下面代码试试

export default class mymode extends Component {
  constructor(props) {
    super(props)
#4

bind之前你用的什么代码,没有对比诶

#5

changedata已经用了箭头函数 锁定了作用域

#6

逗我呢,改成这样也是可以的:

onClick={this.changeData.bind(null,item)}

onClick需要传入的是一个函数,你bind一下只是为了返回一个包含了传入参数的函数。
可以写成这个样子:

onClick={() => { this.changeData(item) } }

#7

bind之前onClick函数就是这样的onClick={this.changeData(item)} 其他代码没有变化

#8

onClick={this.changeData(item)}那为什么直接这样写会有递归渲染的问题呢

#9

在组件render的时候dispatch,这个组件应该依赖了redux中的数据,props改变导致更新重新render,下次render又dispatch了。应该是这个原因吧

#10

你直接onClick={ this.changeData( time ) },这样子是直接函数执行了(调用了this的changeData方法),然后将函数执行结果当做参数,传给onClick了。

另外,关于this绑定问题,可以看看我之前关于this的回答:() => this.tick(),这里为什么不能改为this.tick()?谢谢