React结合Redux实现复选框状态绑定及内容展示问题排查

嘿，我帮你梳理下代码里的几个关键问题，这些应该就是导致功能失效的核心原因：

1. 容器组件的this指向与pet属性映射问题 #

• 首先，你的conditionHandler是class组件的普通方法，默认不会绑定组件实例的this，直接调用时this.props会是undefined，导致无法读取pet值。
• 其次，你的mapStateToProps只返回了pers: state.persons，但conditionHandler里试图访问this.props.pet——这个属性根本没从Redux状态映射到组件props中，自然拿不到有效数据。

2. 渲染NewPerson时错误使用全局pet而非单个person的pet #

你在Reducer里已经正确把每个新添加用户的pet存入了newMan.pet字段，也就是说每个per对象都有自己的pet属性。但你在遍历this.props.pers时，却调用conditionHandler(this.props.pet)，这里应该传入当前遍历项的per.pet，而不是不存在的全局this.props.pet。

3. conditionHandler的参数定义与调用不匹配 #

你定义conditionHandler()时没有接收参数，但调用时却传了this.props.pet，方法内部还是用this.props.pet判断，完全没用到传入的参数，逻辑上完全脱节。

修改后的关键代码示例 #

容器组件（DropingList）

class DropingList extends Component {
  // 用箭头函数自动绑定this，避免指向问题
  conditionHandler = (pet) => { 
    if(pet === 'cat'){ 
      return "YEAH!!!" 
    } else {
      return null;
    }
  }

  render() {
    return (
      <div>
        <AddHimHer click={this.props.onAddMan} />
        { this.props.pers.map(per =>( 
          <NewPerson 
            key={per.id} 
            click={() => this.props.onManDown(per.id)} 
            name={per.name} 
            age={per.age} 
            // 传入当前person的pet属性，而非全局props
            animal={this.conditionHandler(per.pet)} 
          /> 
        )) }
      </div>
    )
  }
}

const mapStateToProps = state => {
  return {
    pers: state.persons
    // 只有当Redux状态里有全局pet时才需要映射，否则不需要
    // pet: state.pet 
  }
}

const mapDispatchToProps = dispatch => {
  return {
    onAddMan: (name,age,pet) => dispatch({type:actionTypes.ADD_MAN, data: {nam: name, ag: age, superp: pet}}),
    onManDown: (id) => dispatch({type:actionTypes.MAN_DOWN, Id: id})
  }
}

export default connect(mapStateToProps,mapDispatchToProps)(DropingList);

子组件与Reducer无需修改

你的NewPerson组件和personReducer逻辑是正确的，只要容器组件传递正确的animal值，就能正常显示对应内容。

内容的提问来源于stack exchange，提问作者Micha艂