反应挂钩-从父组件调度重置状态

问题描述

这是我的应用程序，其中已复制了场景，这里是codeandBox中的demo

我有两个组成部分，Leagues（父）和Details（子）。

我在Details组件按钮中有一个已实现的重置按钮示例，

 const cleanArray = () => {
   setDataHomeTeam([]);
 };

<button onClick={cleanValue} type="button">Reset</button>

您可以在demo中看到清空了一组球队统计信息

我的问题是，例如，我是否可以从“详细信息”组件和父组件Leagues中实现相同的按钮？实现它的方法是什么？

我想走这条路，但是我做不完。

所以在我的Details.js

let Details = forwardRef(({ ....

  const cleanArray = () => {
    setDataHomeTeam([]);
  };

  useImperativeHandle(ref,() => {
     return {
      cleanValue: cleanValue
     }
  });

在App.js

中

    <Leagues/>
    <button onClick={cleanValue} type="button">Reset</button>
    <Details ref={ref} />

我收到此错误：'cleanValue'未定义为no-undef

这是我不能做的事情吗？我该如何实现？

解决方法

我认为您的方法听起来很正确，但缺乏调用公开的api cleanValue的方式。基本上，您必须通过ref调用它，方法如下：

function App() {
  const ref = useRef();

  return (
    <>
      <Leagues />
      {/* call it via ref */}
      <button onClick={() => ref.current.cleanValue()} type="button">Reset</button>
      <Details ref={ref} />
    </>
  )
}

Codesandbox链接：https://codesandbox.io/s/nifty-raman-c0zff?file=/src/components/Details.js

,

我不完全了解您要做什么，但这是我认为可以解决您的问题的解决方案

假设您要使用选定的团队 liverpool 过滤该数组，首先，如果您可以控制传入的数据，我建议像这样更改数组中的obj {day : 16,teamName:"liverpool"}，这将有助于您稍后过滤该数组，

然后您useEffect和useState更新该数组

 [teams,setTeams] = useState([]);
  // the array changes here {day: 1,teamName : "sao paulo"},{day:2,teamname:"liverpool"}] 

 useEffect(()=>{
 setTeams((T)=>{
   return T.filter((oneTeam)=>{
           return oneTeam.teamName == selectedTeam;
     });
})
},[teams,selectedTeam]);