ckinmind / apple-basket-redux

🍎 苹果篮子,一个微型的redux/mobx演示(附多版本)
https://ckinmind.github.io/apple-basket-redux/
125 stars 71 forks source link

获取AppleItem的问题(换一种方式失效了) #4

Open ckinmind opened 7 years ago

ckinmind commented 7 years ago

之前渲染AppleItem的方式是,在render的return中

<div className="appleList">
                    {
                        apples.map(apple => {
                            if(!apple.isEaten)
                                return <AppleItem apple={apple} 
                                                               eatApple={actions.eatApple} 
                                                               key={apple.id} />
                        })
                    }
 </div>

这时候都是没问题的,吃苹果的操作都能进行

但是当我将其抽成一个方法的时候,发现吃苹果的操作失效了

 getAppleItem(){
        return this.props.apples.map(apple => {
            if(!apple.isEaten){
                return  <AppleItem apple={apple}  eatApple={actions.eatApple}  key={apple.id} />
            }
        });
    }

render(){
...
return (
   ...
 <div className="appleList">
       { this.getAppleItem() }
   </div>
  ...
)

}

测试的发现eatApple失效了了,不知道为什么

ckinmind commented 7 years ago

找到失败的原因了,是因为,我在开头引入了actions, 然后再render中也有actions

import actions from '../actions/appleAction';

所以要修改getAppleItem中的actions来源

getAppleItem(){
        return this.props.apples.map(apple => {
            if(!apple.isEaten){
                return  <AppleItem apple={apple}  eatApple={this.props.actions.eatApple}  key={apple.id} />
            }
        });
    }