Question

我正在尝试了解如何将数据从容器传递到组件。现在我在reducer中有一个事务列表，事务sum在容器中计算，目前它正在容器中显示。如何将计算传递给组件并从那里显示它？

缩短以下代码，使其更易于阅读。

减速器：

const transactions = [
  {
    amount: 2,
  },
  {
    amount: 1,
  },
]

容器：

@connect(state => ({
  transactions: state.transactions,
}))

export default class Bank extends Component {
  render() {
    return (
      <div>
        <Balance amount={ this.props.transactions.reduce((sum, nextElement) => sum + nextElement.amount, 0)}/>
      </div>
    )
  }
}

成分：

const Balance = ({ amount }) => (
  <div>
    {amount}
  </div>
)

任何帮助都将受到高度赞赏：）

Answer 1

似乎可能是您的商店设置方式或设置全局状态的问题。我会使用redux dev工具检查你的状态，因为你的减少是正确的，并且你正确地将支柱传递给你的子组件。

Answer 2

我相信你必须传递this.state.transactions而不是道具并初始化你班级的金额状态平衡调用如amount = this.props.amout

React - 将数据传递给组件

2 个答案: