React组件中Props到State的同步与动态列表渲染的最佳实践

import React, { Component } from 'react';
// import LoggBockRowItem from './LoggBockRowItem'; // 假设已定义并导入

class LoggBockRowList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loggbocks: null // 初始化state，存储原始数据而非JSX
    };
  }

  /**
   * static getDerivedStateFromProps 生命周期方法：
   * 在每次render前调用，用于根据props更新state。
   * 返回一个对象来更新state，或返回null表示不更新。
   * 此方法是静态的，无法访问组件实例的`this`。
   */
  static getDerivedStateFromProps(props, state) {
    // 仅当传入的props.loggbocks与当前state中的loggbocks不同时才更新state。
    // 注意：这里是浅比较，对于复杂对象数组，可能需要更深入的比较逻辑
    if (props.loggbocks !== state.loggbocks) {
      return {
        loggbocks: props.loggbocks // 将props中的数据复制到state
      };
    }
    return null; // 如果props未改变或无需更新state，则返回null
  }

  // ... render 方法将在下一节介绍
}

import React, { Component } from 'react';
// import LoggBockRowItem from './LoggBockRowItem'; // 假设已定义并导入

class LoggBockRowList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loggbocks: null
    };
  }

  static getDerivedStateFromProps(props, state) {
    if (props.loggbocks !== state.loggbocks) {
      return {
        loggbocks: props.loggbocks
      };
    }
    return null;
  }

  render() {
    const { loggbocks } = this.state; // 从state中获取数据

    return (
      <ul>
        {/* 条件渲染：只有当loggbocks存在且有数据时才进行遍历渲染 */}
        {loggbocks && loggbocks.length > 0 ? (
          loggbocks.map((loggbock) => (
            <LoggBockRowItem
              key={loggbock.id || loggbock.key || JSON.stringify(loggbock)} // 确保key的唯一性，优先使用稳定ID
              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}
            />
          ))
        ) : (
          // 当没有数据时，可以渲染一个占位符或提示信息
          <p>暂无日志记录。</p>
        )}
      </ul>
    );
  }
}

export default LoggBockRowList;