React类组件Props已传入但无法访问，控制台输出空数组

问题原因 #

核心问题是组件初始化时异步获取的Props还未加载完成：constructor仅在组件挂载时执行一次，此时异步请求的Props还未返回，存入state的是空数组；后续Props更新后，state不会自动同步，导致打印的始终是初始空值。

解决方案 #

1. 避免在constructor中同步Props到State #

类组件中若无需修改Props的副本，直接使用this.props即可，防止State与Props数据不同步。

2. 用生命周期方法确保数据就绪 #

通过componentDidMount（组件首次挂载后）和componentDidUpdate（Props更新后）处理数据，这两个阶段能保证Props已正常传入。

3. 修正数据匹配逻辑 #

uptaskdate是数组，不能直接读取taskdate.task_id，需遍历匹配对应任务。

修改后的代码示例 #

export default class UpcomingBar extends Component {
  constructor(props) {
    super(props);
    this.state = {
      taskentries: [],
    };
    this.combineTaskInfo = this.combineTaskInfo.bind(this);
  }

  componentDidMount() {
    this.combineTaskInfo();
  }

  componentDidUpdate(prevProps) {
    // 仅在Props变化时重新处理数据，避免无限循环
    if (prevProps.uptasks !== this.props.uptasks || prevProps.uptaskdate !== this.props.uptaskdate) {
      this.combineTaskInfo();
    }
  }

  combineTaskInfo() {
    const { uptasks, uptaskdate } = this.props;
    // 先判断数组是否有数据，避免空数组调用方法报错
    if (!uptasks.length || !uptaskdate.length) {
      console.log("数据未加载完成");
      return;
    }

    // 匹配任务与对应日期数据
    const taskEntries = uptasks.map(task => {
      const matchedDate = uptaskdate.find(date => date.task_id === task.id);
      return {
        task: task.task,
        lastcompleted: matchedDate?.lastcompleted,
        help: task.instructions,
      };
    });

    this.setState({ taskentries: taskEntries });
    console.log("处理后的数据", taskEntries);
  }

  render() {
    const { taskentries } = this.state;
    return (
      <div>
        {taskentries.map((entry, index) => (
          <div key={index}>
            <p>任务：{entry.task}</p>
            <p>上次完成时间：{entry.lastcompleted}</p>
          </div>
        ))}
      </div>
    );
  }
}

关键说明 #

• componentDidMount保证组件挂载后首次处理数据；componentDidUpdate监听Props变化，数据更新时重新处理。
• 使用find匹配对应任务的日期数据，?.可选链操作符避免matchedDate为undefined时报错。
• 处理前先判断数组长度，防止空数组调用map/find方法抛出异常。

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