React - 将数据传递给组件答案

【问题标题】：React - Passing Data to ComponentReact - 将数据传递给组件
【发布时间】：2018-07-14 20:23:36
【问题描述】：

我试图了解如何将数据从容器传递到组件。现在我有一个减速器中的交易列表，交易总和在容器中计算，目前它正在容器中显示。如何将我的计算传递给组件并从那里显示？

以下代码已被缩短，以便于阅读。

减速器：

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>
)

任何帮助将不胜感激:)

【问题讨论】：

您将计算出的金额作为道具传递给 Balance 组件并已经在那里显示，所以不确定您的问题是什么？
@RobWalker 问题是我的金额显示在容器中，组件显示“0”。似乎它没有路径计算量，我不知道为什么
这看起来是正确的

标签： javascript reactjs react-native components

【解决方案1】：

您的商店的设置方式或全局状态的设置方式似乎存在问题。我会使用 redux 开发工具来检查您的状态，因为您的归约是正确的，并且您正在正确地将 prop 传递给您的子组件。

【讨论】：

这可能是评论而不是答案:)

【解决方案2】：

我相信你必须传递 this.state.transactions 而不是 props 并在你的类 Balance 调用中初始化金额状态，如 amount = this.props.amout

【讨论】：