我这里有一个组件,
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}</>;
};
1.在该组件中,我返回一个由<ComponentOne />
组成变量,我使用map函数循环该变量
1.在<ComponentOne />
内部,i也有一个三进制来检查是否定义了某些东西,
1.如果它已定义,我将Map另一个组件,即<ComponentTwo />
1.在<ComponentTwo />
中,我从<ParentComponent />
中为state
和toggleState
定义了属性
如果我运行这段代码,会有一个Uncaught runtime errors: ERROR playButtonState is undefined
但是如果我只画一张这样的Map
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}</>;
};
没有人给我一个错误,思想?
1条答案
按热度按时间yhuiod9q1#
实际上,你的问题并没有提供足够的关于你的问题的信息,但看起来在你的
ComponentTwo
组件中,你把state
prop赋值给了一个名为playButtonState
的变量,你在某个地方使用它,导致了undefined
错误。基于这个假设,当
datas.children === undefined
条件为true
时,您将返回<ComponentTwo>Not Found</ComponentTwo>
,因此state
prop的值为undefined
,您将得到错误,因此,您应该查看一下ComponentTwo
组件,并添加几个if
语句或其他内容来控制playButtonState
undefined