Javascript React功能组件父级和子级-未处理的拒绝（TypeError）：X不是功能 我有一个包含处理函数（handleChallengeSave）的父应用程序 handler函数在父对象中触发useState（setSavedChallenge） 处理函数作为道具传递给子级

我收到一个“未处理的拒绝（TypeError）：X不是函数”错误。但是，如果除了将状态移动到子对象之外，我什么也不做更改，它就会工作

例如：

这不起作用：

家长（App.js）

const-App=（）=>{
const[savedChallenge，setSavedChallenge]=useState（“”）；
const handleChallengeSave=（挑战）=>{
设置SavedChallenge（挑战）；
};
返回(
);
};

孩子（Home.js）

const Home=（{handleChallengeSave}）=>{
const getRequestUserChallengeDb=async（）=>{
等待axios
.get（`${USER\u CHALLENGE\u DB\u LINK}/${STRAVA\u ID}`）
。然后（（res）=>{
如果（资源状态===200）{
log（“是的，菜豆！你在挑战中。”）；
让您的currentChallenge=res.data.currentChallenge；
handleChallengeSave（您当前的挑战）；
}
if（res.status==201）{
console.log(
“你不是挑战伙伴。请转到挑战页面加入挑战！”
);
}
})
.catch（（错误）=>{
投掷误差；
});
};
getRequestUserChallengeDb（）；
返回(
你好{window.localStorage.firstName}
);
};
导出默认主页；

非常感谢任何帮助

发行

Route

组件不会向儿童传递额外的道具

解决方案 在

Render

prop上渲染

Home

，以传递其他道具

<Router>
  <Route
    path="/"
    exact
    render={(routeProps) => (
      <Home
        {...routeProps}
        handleChallengeSave={handleChallengeSave}
      />
    )}
  />
</Router>

---

先生，你绝对是个传奇人物。非常感谢你。我真的很感激。（这很有效-我选择了选项2！）@Ironmongrrl太棒了！如果这解决了您的问题，并且您觉得它很有帮助，那么请不要忘记接受它作为答案并投票表决。干杯。哈哈哈，你能告诉我这是我第一次在牛仔竞技会上问关于堆栈溢出的问题吗！：）经过2个小时的挣扎，我的头脑都崩溃了，你在30秒内解决了它。祝你有一个美好的一天！！

const Home = ({ handleChallengeSave }) => {

  const getRequestUserChallengeDb = async () => {
    await axios
      .get(`${USER_CHALLENGE_DB_LINK}/${STRAVA_ID}`)
      .then((res) => {
        if (res.status === 200) {
          console.log("Yes keen bean! You're in a challenge.");
          let yourCurrentChallenge = res.data.currentChallenge;
          handleChallengeSave(yourCurrentChallenge);
        }
        if (res.status === 201) {
          console.log(
            "You ain't in a challenge mate. Head to the challenges page to join one!"
          );
        }
      })
      .catch((error) => {
        throw error;
      });
  };

  getRequestUserChallengeDb();

 return (
    <>
      <Navbar />
      <div className="homepage_container">
        <h2>Hi {window.localStorage.firstName}</h2>
      </div>
      <Challengebutton />
    </>
  );
};

export default Home;

<Router>
  <Route
    path="/"
    exact
    render={(routeProps) => (
      <Home
        {...routeProps}
        handleChallengeSave={handleChallengeSave}
      />
    )}
  />
</Router>

<Router>
  <Route
    path="/"
    exact
  >
    <Home
      {...routeProps}
      handleChallengeSave={handleChallengeSave}
    />
  </Route>
</Router>