对元素位置的UseRef和forwardRef问题进行反应

Question

我已经成功连接了我的组件Details.js，以便管理组件本身的状态，以下是步骤：

你可以在这里看到演示

详细信息.js

import React, { useState, useEffect, useRef, ref, useImperativeHandle, forwardRef } from "react";
const cleanValue = () => {
setDataHomeTeam([]);
setDataAwayTeam([]);
};
useImperativeHandle(fowardedRef, () => {
return {
cleanValue: cleanValue
};
});
const ConnectedDetails = connect(
mapStateToProps,
mapDispatchToProps,
null
)(Details);
export default forwardRef((props, ref) => {
return <ConnectedDetails {...props} fowardedRef={ref} />;
});

App.js

const ref = useRef();  
<button onClick={() => ref.current.cleanValue()} type="button">Reset</button>
<Details ref={ref} />

它工作，演示在这里。

我的问题是，当我将此元素从App.js移动到Leagues.js时，正如您在演示中看到的那样(两种情况都有(

Leagues.js

71号线

<button onClick={() => ref.current.cleanValue()} type="button">Reset</button>

当我点击它时，我得到了这个错误=>TypeError无法读取未定义的的属性"cleanValue">

有可能吗？如果是，我做错了什么？我该如何解决？

Answer 1

正如评论中所指出的，主要问题是Leagues组件中的ref引用没有指向Details组件。

可以对原始代码进行以下3项修改，以使Leagues组件中的按钮工作：

1. 向Leagues组件添加onReset属性

   let Leagues = ({
   getList,
   getStats,
   leaguesList,
   loading,
   getDetail,
   teamsDetail,
   onReset
   })
   

2. 在Leagues分量中使用onReset函数

   原件：<button onClick={() => ref.current.cleanValue()} type="button">

   新增：<button onClick={onReset} type="button">
   
   

3. 将Leagues组件的onReset属性设置为将调用Details组件的cleanValue()方法的函数

   原件：<Leagues />

   新增：<Leagues onReset={() => ref.current.cleanValue()} />
   
   

完整的代码可以在这里找到。

请注意，从体系结构的角度来看，不建议组件通过引用访问其同级组件。许多似乎需要这样做的场景可以通过父组件更好地处理。