Question

我正在通过db输入（数据）来迭代生成卡组件。我正在尝试找出如何为每张卡正确 mapStatetoProps 和 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 {}不正确。

Answer 1

这是上下文绑定的问题。

实际上，当您这样做

return cardData.map(this.renderCard);

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

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

将this传递给您的地图函数：cardData.map(this.renderCard, this)
在构造函数中绑定上下文：this.renderCard = this.renderCard.bind(this)
或者在定义renderCard时使用箭头功能，因此如下所示：

renderCard = () => {...}

迭代创建新组件。如何将每个新组件添加到Redux存储中？

1 个答案: