反应元素位置的 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工作：

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()} />
   
   

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

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