React 类组件中 Props 映射到 State 及动态列表渲染的最佳实践

class LoggBockRowList extends Component {
    state = {
        loggbocks: [null],
    }

    handleloggbocks = () => {
        // 在render中调用setState会导致无限循环
        this.setState({
            loggbocks: [this.props.loggbocks.map(loggbock =>
                <LoggBockRowItem
                    key={loggbock.key}
                    // ... 其他props
                />)]
        })
    }

    render() {
        this.handleloggbocks(); // 每次渲染都会触发setState，导致无限循环
        return <ul>{this.loggbocks}</ul>
    }
}

class LoggBockRowList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loggbocks: null // 初始state可以设置为null或空数组
    };
  }

  static getDerivedStateFromProps(props, state) {
    // 检查props.loggbocks是否存在，并将其同步到state
    // 这里我们假设props.loggbocks是一个数据数组，而不是JSX元素
    if (props.loggbocks !== state.loggbocks) { // 简单比较，实际可能需要更复杂的深比较
        return {
            loggbocks: props.loggbocks
        };
    }
    return null; // 如果props没有变化，则不更新state
  }

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

class LoggBockRowList extends Component {
  // ... constructor 和 static getDerivedStateFromProps 方法

  render() {
    return (
      <ul>
        {this.state.loggbocks && // 确保loggbocks数据存在
          this.state.loggbocks.map((loggbock) => (
            <LoggBockRowItem
              key={loggbock.key} // 确保每个列表项都有唯一的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}
            />
          ))}
      </ul>
    );
  }
}

import React, { Component } from 'react';
// 假设 LoggBockRowItem 是一个已定义的子组件
// import LoggBockRowItem from './LoggBockRowItem'; 

class LoggBockRowList extends Component {
  constructor(props) {
    super(props);
    this.state = {
      loggbocks: null // 初始状态，等待props传入数据
    };
  }

  /**
   * getDerivedStateFromProps 在每次渲染前被调用，用于根据props更新state。
   * 它是一个静态方法，不能访问this实例，应返回一个对象来更新state，或返回null。
   */
  static getDerivedStateFromProps(props, state) {
    // 比较当前props和state中的loggbocks数据是否一致
    // 简单的引用比较可能不足以处理复杂对象，根据实际需求可能需要深比较
    if (props.loggbocks !== state.loggbocks) {
      return {
        loggbocks: props.loggbocks
      };
    }
    return null; // 如果props没有变化，则不更新state
  }

  render() {
    // 在render方法中，根据state中的数据动态生成JSX元素列表
    const { loggbocks } = this.state; // 解构state，使代码更简洁

    return (
      <ul>
        {/* 确保loggbocks存在且为数组，然后进行map操作 */}
        {loggbocks && Array.isArray(loggbocks) && loggbocks.map((loggbock) => (
          <LoggBockRowItem
            key={loggbock.key || loggbock.id} // 强烈建议使用稳定的唯一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}
          />
        ))}
      </ul>
    );
  }
}

export default LoggBockRowList;