反应元素位置的 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} />;

});

应用程序.js

const ref = useRef();  

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

<Details ref={ref} />

它有效，演示在这里。

我的问题是当我将此元素从App.js移动到Leagues.js时，您可以在演示中看到（两种情况）

联赛.js

71号线

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

当我点击它时出现此错误 => TypeError Cannot read property 'cleanValue' of undefined

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

Answer 1

正如评论中所指出的，主要问题是组件ref内的引用Leagues未指向Details组件。可以对原始代码进行以下 3 处修改，以使组件中的按钮正常Leagues工作：onReset向Leagues组件添加属性&nbsp;let&nbsp;Leagues&nbsp;=&nbsp;({ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;getList, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;getStats, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;leaguesList, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;loading, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;getDetail, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;teamsDetail, &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;onReset &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;})使用组件onReset中的函数Leagues原文：&nbsp;<button onClick={() => ref.current.cleanValue()} type="button">新的：&nbsp;<button onClick={onReset} type="button">onReset将组件的属性设置为将调用组件方法的Leagues函数cleanValue()Details原来的：&nbsp;<Leagues />新的：&nbsp;<Leagues onReset={() => ref.current.cleanValue()} />完整的代码可以在这里找到。请注意，从架构的角度来看，不建议组件通过引用访问其兄弟组件。许多似乎需要这样做的场景可能通过父组件更好地处理。