为了账号安全,请及时绑定邮箱和手机立即绑定

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

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

慕雪6442864 2023-03-18 16:11:18
我已成功连接我的组件Details.js以便管理组件本身的状态,这些是步骤:你可以在这里看到演示细节.jsimport 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} />;});应用程序.jsconst ref = useRef();  <button onClick={() => ref.current.cleanValue()} type="button">Reset</button><Details ref={ref} />它有效,演示在这里。我的问题是当我将此元素从App.js移动到Leagues.js时,您可以在演示中看到(两种情况)联赛.js71号线<button onClick={() => ref.current.cleanValue()} type="button">Reset</button>当我点击它时出现此错误 => TypeError Cannot read property 'cleanValue' of undefined是否可以 ?如果是,我做错了什么,我该如何解决?
查看完整描述

1 回答

?
largeQ

TA贡献2039条经验 获得超7个赞

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

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

  1. onResetLeagues组件添加属性

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

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

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


查看完整回答
反对 回复 2023-03-18
  • 1 回答
  • 0 关注
  • 56 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信