父组件向子组件传递属性时出现undefined的问题求助

看起来你遇到的核心问题是父组件初始渲染时props.perioder未就绪（大概率是异步加载的数据还未返回），导致基于它初始化的toogleForms状态异常，进而传递给子组件的属性出现undefined；同时使用旧生命周期componentWillReceiveProps的更新逻辑也存在漏洞，咱们一步步拆解解决：

一、问题根源分析 #

1. 初始状态的空值隐患
   你的constructor里直接调用props.perioder.map，但如果初始渲染时props.perioder还没拿到（比如父组件的perioder是通过API请求获取的，第一次渲染时为undefined），这里会直接抛出错误，或者toogleForms被初始化为错误值，子组件自然拿到异常数据。

2. componentWillReceiveProps的局限性
   这个生命周期在React 16.3+已经被标记为不安全，它的执行时机不可控（比如父组件重新渲染即使perioder没变化也会触发），而且你贴的代码没写完，但大概率没做「新旧props对比」，会导致不必要的state更新，甚至无限循环。

3. 子组件可能未做空值兜底
   如果子组件直接使用传递的toogleForms，没有处理空值情况，也会出现undefined报错。

二、分步解决方案 #

1. 修复初始状态的空值判断 #

在constructor里先判断props.perioder是否存在，再执行map操作，避免报错：

constructor(props) {
  super(props);
  // 先判断perioder是否存在，不存在则初始化为空数组
  this.state = {
    toogleForms: props.perioder ? props.perioder.map((periode, index) => ({ index, open: !periode.bekreftet })) : []
  };
  this.removePeriodCallback = this.removePeriodCallback.bind(this);
}

2. 替换不安全的生命周期，用componentDidUpdate更新状态 #

componentDidUpdate是类组件中安全的更新钩子，记得一定要加新旧props对比，避免无限循环：

componentDidUpdate(prevProps) {
  // 只有当perioder真正变化时才更新state
  if (prevProps.perioder !== this.props.perioder) {
    const newToogleForms = this.props.perioder 
      ? this.props.perioder.map((periode, index) => ({ index, open: !periode.bekreftet })) 
      : [];
    this.setState({ toogleForms: newToogleForms });
  }
}

如果你的场景需要更严谨的状态推导（比如依赖props的变化提前准备状态），也可以用静态方法getDerivedStateFromProps，但需要额外维护一个对比用的state：

static getDerivedStateFromProps(nextProps, prevState) {
  // 对比新props和之前保存的perioder，只有变化时才更新
  if (nextProps.perioder !== prevState.storedPerioder) {
    return {
      toogleForms: nextProps.perioder 
        ? nextProps.perioder.map((periode, index) => ({ index, open: !periode.bekreftet })) 
        : [],
      storedPerioder: nextProps.perioder // 保存当前perioder用于下次对比
    };
  }
  return null; // 不需要更新state时返回null
}

// 同时在constructor里初始化storedPerioder
constructor(props) {
  super(props);
  this.state = {
    toogleForms: props.perioder ? props.perioder.map((periode, index) => ({ index, open: !periode.bekreftet })) : [],
    storedPerioder: props.perioder
  };
  this.removePeriodCallback = this.removePeriodCallback.bind(this);
}

3. 给子组件加空值兜底 #

为了保险起见，在子组件里设置默认props，或者解构时加默认值：

// 子组件中设置默认props
ChildComponent.defaultProps = {
  toogleForms: []
};

// 或者在子组件内部解构时兜底
const { toogleForms = [] } = this.props;

4. 推荐：转为函数组件用useState + useEffect管理 #

如果可以重构的话，函数组件的hooks写法更简洁，也能避免类组件生命周期的坑：

import { useState, useEffect } from 'react';

const ParentComponent = (props) => {
  // 初始化状态时处理空值
  const [toogleForms, setToogleForms] = useState(
    props.perioder ? props.perioder.map((periode, index) => ({ index, open: !periode.bekreftet })) : []
  );

  // 监听perioder变化，更新状态
  useEffect(() => {
    setToogleForms(
      props.perioder ? props.perioder.map((periode, index) => ({ index, open: !periode.bekreftet })) : []
    );
  }, [props.perioder]); // 依赖数组：只有perioder变化时才执行

  const removePeriodCallback = () => {
    // 你的回调逻辑
  };

  return (
    <ChildComponent toogleForms={toogleForms} />
  );
};

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