如何在LoggBockRowList类中映射并保存props值为LoggBockRowItem数组？

原代码核心问题 #

• 无限重渲染循环：在render方法中直接调用handleloggbocks，该方法内的setState会触发重新渲染，进而再次调用handleloggbocks，形成无限循环。
• 不必要的state存储：从props转换而来的组件列表属于衍生数据，无需存入state，直接在render中处理即可，避免额外的状态同步开销。
• 数组嵌套错误：this.props.loggbocks.map()已经返回数组，外层又套了[]，导致state.loggbocks变成二维数组，渲染时会出现异常。
• 状态访问错误：render中返回的this.loggbocks并不存在，正确的状态访问应为this.state.loggbocks，但即使修正这个，循环问题依然存在。

修正后的代码 #

class LoggBockRowList extends Component {
  render() {
    // 直接在render中处理props，生成组件列表
    const loggbockItems = this.props.loggbocks.map(loggbock => (
      <LoggBockRowItem
        key={loggbock.key}
        id={loggbock.id}
        datum={loggbock.datum}
        tid={loggbock.tid}
        skift={loggbock.skift}
        anläggningsdel={loggbock.anläggningsdel}
        orsak={loggbock.orsak}
        driftstatus={loggbock.driftstatus}
        beskrivning={loggbock.beskrivning}
        plats={loggbock.plats}
        rapporterare={loggbock.rapporterare}
      />
    ));

    return <ul>{loggbockItems}</ul>;
  }
}

额外优化建议 #

• 如果需要对props中的数据做预处理（比如过滤、排序），可以使用PureComponent或shouldComponentUpdate来避免不必要的重渲染；若使用函数组件，可配合memo和useMemo实现相同效果。
• 确保loggbock.key是唯一且稳定的标识，避免React列表渲染时出现性能问题或DOM异常。

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