Question

希望您可以澄清此问题：

我有父级组件：

function App() {


const [ thanks, setThanks ] = useState(null);


const thankerHandler=(value)=>{
  setThanks(value)
}
**//in the return**
<Route component={PaymentPage} thankerHandler={thankerHandler} path="/payment" />```

和子组件：


 const PaymentPage=({thankerHandler})=> {
const [thanks, setThanks] = useState(false);
**//after some logic**
useEffect(() => {
     
    thankerHandler(thanks);

}, [thanks])

问题在于反应告诉了我以下内容：

     61 | useEffect(() => {
  62 |      
> 63 |     thankerHandler(thanks);
  64 | 
  65 | }, [thanks])

thankerHandler is not a function

我不知道我在这里做错了什么，想法是当在子组件中调用该函数时，它将更新父组件中的值，但是当我控制台日志时，它没有做任何事情thankerHandler，由于父级中的空状态而只给我提供undefined的值，如果我将其设置为false，则给我false，依此类推，但不会将其识别为函数。

有人知道我在这里做错了吗？预先感谢

Answer 1

由于PaymentPage组件是通过Route组件呈现的，因此传递给props组件的Route不会传递给PaymentPage组件。

代替使用component道具来渲染PaymentPage组件，而使用带有功能的render道具。它将允许您将props传递给PaymentPage组件

更改

<Route component={PaymentPage} thankerHandler={thankerHandler} path="/payment" />

到

<Route
  path="/payment"
  render={(routerProps) => <PaymentPage {...routerProps} thankerHandler={thankerHandler} />}
/>

除此问题外，PaymentPage组件中还有另一个问题。

由于useEffect正在调用thankerHandler函数，因此应将thankerHandler添加到useEffect钩子的依赖项数组中

useEffect(() => {
   thankerHandler(thanks);
}, [thanks, thankerHandler]);

但是将thankerHandler添加到useEffect钩子的依赖项数组将导致另一个问题，即，当App组件重新渲染时，thankerHandler函数将被重新创建并对该新函数的引用将传递给PaymentPage组件，这将导致useEffect组件中的PaymentPage钩子再次运行。这可能不是您想要的东西。如果您不希望这样做，请确保将thankerHanlder函数包装在useCallback钩子中，以防止useEffect钩子不必要地运行。

Answer 2

尝试在<Route render={() => <PaymentPage thankerHandler={thankerHandler} />} path="/payment" />组件中使用渲染方法：

//updateUser
AdminUser adminUser = findById();
adminUser.setFirstName(adminUserModel.getFirstName());
adminUser.setLastName(adminUserModel.getLastName());
adminUser.setPassword(PasswordEncoderGenerator.generate(adminUserModel.getPassword()));
adminUser.setUsername(adminUserModel.getUsername());
adminUser.setDateOfBirth(CalendarTools.getDateFromCustomDate(adminUserModel.getDateOfBirth()));
adminUser.setGender(etcItemService.findByIdAndCheckEntity(adminUserModel.getGender_id(), GenderEnum.class,null,true));

adminUser = adminUserRepository.save(adminUser);

//update userAcount For Admin
//call grpcUpdate
this.userAcountStub.grpcUpdate(createRequestModel);


//update UserContact For Admin
//call grpcUpdate
this.userContactStub.grpcUpdate(createRequestModel);


adminUserModel.setId(adminUser.getId());
return adminUserModel;

将值传递给父元素react挂钩

2 个答案: