0

我通过数据库输入（数据）迭代生成卡组件。我试图弄清楚如何正确地为每张卡映射StatetoProps和mapDispatchtoProps。目前，我的addCard操作导致 TypeError，因为它表示addCard操作未定义。

我的 Reducer 组件有一个 initialState，其中包含一个卡片数组，我试图在其中放置所有这些卡片。

可能有一个我只是缺少的解决方案，但我会很感激任何建议。

class CardContainer extends React.Component {
  renderCard(item) {
    this.props.addCard(item); // <- this is where addCard gets called
    return (
      <CardTemplate
        title={item.name}
        address={item.address}
        phone={item.phone}
        hours={item.hours}
        key={item.service_id}
      />
    );
  }

  renderCards(cardData) {
    return cardData.map(this.renderCard);
  }

  render() {
    return <div className="Card_Container">{this.renderCards(data)}</div>;
  }
}

const mapStateToProps = state => {
  return {
    service_id: {
      name: state.rtS.rightMenu.cards,
      title: state.rtS.rightMenu.cards,
      address: state.rtS.rightMenu.cards,
      hours: state.rtS.rightMenu.cards
    }
  };
};

const mapDispatchToProps = dispatch => {
  return {
    addCard: item =>
      dispatch({
        type: actionTypes.ADD_CARD,
        payloadA: item.name,
        payloadAd: item.address,
        payloadP: item.phone,
        payloadH: item.hours,
        payloadS: item.service_id
      })
  };
};

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

我的 addCard 方法可能写错了，或者我的 mapStatetoProps return{} 不正确。

4

1 回答 1

0

这是上下文绑定的问题。

事实上，当你这样做时

return cardData.map(this.renderCard);

this.renderCard不使用组件上下文调用，因此this.props将在内部未定义renderCard

您需要执行以下操作之一：

  1. 传递this给您的地图功能：cardData.map(this.renderCard, this)
  2. 在构造函数中绑定上下文：this.renderCard = this.renderCard.bind(this)
  3. 或者在定义时使用箭头函数renderCard，所以是这样的：

renderCard = () => {...}

于 2019-03-14T14:30:22.730 回答