React渲染方法中在map函数内调用自定义函数的实现疑问

看起来你在React组件的render方法里遍历studentLedger数组时，调用自定义balance函数的方式出了点问题，我来帮你梳理下：

首先看你代码里的问题点 #

你在<td>里写的{(post) => this.balance(post.dr, post.cr)}只是定义了一个箭头函数，但并没有执行它，所以页面上不会显示计算结果；另外如果this.state.balance是用来存累计余额的，这种写法也没法实现逐行累计的效果——因为map遍历是一次性处理所有元素，没法在遍历过程中动态更新组件状态（而且这么做还会导致无限重渲染）。

解决方案分两种情况： #

情况1：仅计算当前行的独立余额（非累计）

如果你的balance函数只是单纯计算当前行dr和cr的差值（比如dr - cr），那直接在map里调用函数并传入参数就行，不需要额外的箭头函数包裹：

render() {
  return (
    <table>
      <tbody>
        {this.state.studentLedger.map((post, i) => (
          <tr key={i}>
            <td>{ i+1 }</td>
            <td>{ post.transaction_date }</td>
            <td>{ post.particular }</td>
            <td>{ post.dr }</td>
            <td>{ post.cr }</td>
            {/* 直接调用函数并传入参数，不需要包裹箭头函数 */}
            <td>{ this.balance(post.dr, post.cr) }</td>
          </tr>
        ))}
      </tbody>
    </table>
  )
}

// 对应的balance函数示例
balance(dr, cr) {
  // 这里写你的计算逻辑，比如返回差值
  return Number(dr) - Number(cr);
}

情况2：需要计算累计余额（逐行累加）

如果要实现每一行的余额是之前所有行的dr和cr累计后的结果，那不能直接在map里依赖组件状态，建议先在render里用reduce预处理数组，把每一行的累计余额计算好，再遍历渲染：

render() {
  // 先用reduce处理数组，给每个item加上累计balance字段
  const ledgerWithBalance = this.state.studentLedger.reduce((acc, post) => {
    const currentBalance = acc.prevBalance + Number(post.dr) - Number(post.cr);
    acc.list.push({
      ...post,
      cumulativeBalance: currentBalance
    });
    acc.prevBalance = currentBalance;
    return acc;
  }, { list: [], prevBalance: 0 });

  return (
    <table>
      <tbody>
        {ledgerWithBalance.list.map((post, i) => (
          <tr key={i}>
            <td>{ i+1 }</td>
            <td>{ post.transaction_date }</td>
            <td>{ post.particular }</td>
            <td>{ post.dr }</td>
            <td>{ post.cr }</td>
            {/* 直接使用预处理好的累计余额 */}
            <td>{ post.cumulativeBalance }</td>
          </tr>
        ))}
      </tbody>
    </table>
  )
}

额外提示 #

• 尽量不要用数组索引i作为key，如果studentLedger里的每个item有唯一标识（比如id），用这个唯一值作为key会更稳定。
• 如果dr和cr是字符串类型，记得转成数字再计算，避免字符串拼接错误。

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