0

这是我复制场景的应用程序，这里是代码和框中的演示

我有两个组件，Leagues（父）和Details（子）。

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

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

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

您可以在演示中看到清空团队统计数据的数组

我的问题是，我可以实现相同的按钮，但可以从 Details 组件和父组件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' is not defined no-undef

这是我无法做出反应的事情吗？我怎样才能实现它？

4

2 回答 2

1

我认为您的方法听起来是正确的，只是缺少调用cleanValue您公开的 api 的方式。基本上，您必须通过ref传递给它的 a 来调用它，如下所示：

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

于 2020-09-21T10:20:34.333 回答
0

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

假设您想用选定的球队（即利物浦）过滤该数组，首先，如果您可以控制传入的数据，我建议您像这样更改数组中的 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]);
于 2020-09-19T13:08:14.437 回答