React.js多层Map嵌套传递状态与函数报错问题咨询

数据老陈

2026-7-18

React组件多层渲染时属性未定义错误的原因分析

问题复现

报错的组件代码

const ParentComponent = () => {
  const [state, setState] = useState();
  const toggleState = (id) => {
    setState(); //setting some stuff
  };

  const list = data.map((datas) => (
    <ComponentOne>
      {datas.children === undefined ? (
        <ComponentTwo>Not Found</ComponentTwo>
      ) : (
        datas.children.map((datasTwo) => (
          <ComponentTwo state={state} toggleState={toggleState}>
            Found
          </ComponentTwo>
        ))
      )}
    </ComponentOne>
  ));

  return <> {list} </>;
};

运行时触发错误：Uncaught runtime errors: ERROR playButtonState is undefined

无报错的组件代码

const ParentComponent = () => {
  const [state, setState] = useState();
  const toggleState = (id) => {
    setState(); //setting some stuff
  };

  const list = data.map((datas) => (
    <ComponentTwo state={state} toggleState={toggleState}>
     found
    </ComponentTwo>
  ));

  return <> {list} </>;
};

差异原因

两种写法的核心差异在于是否所有<ComponentTwo>实例都传入了必要属性：

第一种写法的三元判断中，当datas.children未定义时，直接渲染的<ComponentTwo>没有传递state（对应错误中的playButtonState）和toggleState属性。而你的ComponentTwo内部必然依赖这两个属性（比如直接读取props.playButtonState、在逻辑中调用toggleState），缺少属性时就会触发“未定义”错误。
第二种写法里，所有<ComponentTwo>都统一传入了state和toggleState，满足了组件的属性依赖，因此不会报错。