javascript React.js -如何将一个状态变量+一个组件中定义的函数传递给map函数内部的组件

cuxqih21  于 2023-06-28  发布在  Java
关注(0)|答案(1)|浏览(108)

我这里有一个组件,

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 />中为statetoggleState定义了属性
如果我运行这段代码,会有一个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}</>;
};

没有人给我一个错误,思想?

yhuiod9q

yhuiod9q1#

实际上,你的问题并没有提供足够的关于你的问题的信息,但看起来在你的ComponentTwo组件中,你把state prop赋值给了一个名为playButtonState的变量,你在某个地方使用它,导致了undefined错误。
基于这个假设,当datas.children === undefined条件为true时,您将返回<ComponentTwo>Not Found</ComponentTwo>,因此state prop的值为undefined,您将得到错误,因此,您应该查看一下ComponentTwo组件,并添加几个if语句或其他内容来控制playButtonStateundefined

相关问题