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

问题描述

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

您可以观看演示here

Details.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} />

它有效，演示为here。

我的问题是，当我将这个元素从 App.js 移到 Leagues.js 时，就像在演示中所看到的（两种情况）

Leagues.js

第71行

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

单击它时出现此错误=> TypeError无法读取未定义的属性'cleanValue'

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

解决方法

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

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

1. 向onReset组件添加Leagues属性

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

2. 使用onReset组件中的Leagues函数

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

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

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

   原文： <Leagues />

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

完整代码可在here中找到。

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