0

我已成功连接我的组件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 无法读取未定义的属性'cleanValue'

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

4

1 回答 1

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

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

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

于 2020-09-24T21:30:23.740 回答