时间戳

首页 > 解决方案 > 反应回调 onClick 无法调用可能是“未定义”的对象

reactjs - 反应回调 onClick 无法调用可能是“未定义”的对象

问题描述

下面是我处理state应用程序的父组件。

 function App() {   
    const [teamData, setTeamData] = useState<any | undefined>(undefined);
    return(
      <> 
          <Teams teams={teams} onTeamClick={() => setTeamData(team)} />
          <Modal teamData={teamData} />
      </>
    )
}

接下来是我的组件，它将状态传递回树。但是，我收到以下打字稿错误：

无法调用可能是“未定义”的对象。

type Props = {
   teams: any[];
   onTeamClick: () => void;
}

function Teams({teams, onTeamClick}: Props) {
   return(
     <div>
       {teams.map(team => {
         // the error is coming from onTeamClick
         // No error if I change it to onTeamClick={onTeamClick}
         <Team name={team.name} onTeamClick={() => onTeamClick(team)} />
       })
     </div>
   )
}

标签： reactjstypescripttypes

解决方案

那是因为这里：

<Teams teams={teams} onTeamClick={() => setTeamData(team)} />

您team从无处获取变量，因此它是undefined.

这样做应该没问题：

<Teams teams={teams} onTeamClick={ team => setTeamData(team) } />

我对 React Hooks 不是很熟悉，但我认为你可以做到这一点，这有点短：

<Teams teams={teams} onTeamClick={ setTeamData } />

推荐阅读