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

Question

我已成功连接我的组件 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 Cannot read 属性 'cleanValue' of undefined

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

Answer 1

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

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

向 Leagues 组件添加 onReset 属性

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

使用 Leagues 组件中的 onReset 函数

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

新： <button onClick={onReset} type="button">
将 Leagues 组件的 onReset 属性设置为将调用 Details 的 cleanValue() 方法的函数组件

原文： <Leagues />

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

可以找到完整代码 here。

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

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

React UseRef and forwardRef issue for an element position

javascript

reactjs

redux

use-ref

react-forwardref