React hooks - 从父组件调度重置状态

Question

这是我的场景复现的应用，这里是codesandboxdemo

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

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

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

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

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

我的问题是，我可以实现相同的按钮，但是可以从 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' 未定义 no-undef

这是我不能用 React 做的事情吗？我怎样才能实现它？

Answer 1

我不完全明白你想做什么，但我认为这里有一个解决方案可以解决你的问题

假设您想用选定的团队过滤该数组，即 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]);

Answer 2

我认为您的方法听起来是正确的，只是缺少调用您公开的 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 link: https://codesandbox.io/s/nifty-raman-c0zff?file=/src/components/Details.js

React hooks - 从父组件调度重置状态

React hooks - Dispatching a reset state from parent component

reactjs

redux

use-effect

use-reducer

use-ref