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

【问题标题】：React hooks - Dispatching a reset state from parent componentReact hooks - 从父组件调度重置状态
【发布时间】：2021-01-06 03:54:27
【问题描述】：

这是我复制了场景的应用程序，这里是代码框中的demo

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

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

 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' is not defined no-undef

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

【问题讨论】：

告诉我你想要达到的目标。你想从父组件改变子组件的状态还是从chiuld改变父组件的状态
任何时候我改变联赛，我想清空我从最后一个选择的球队创建的数组，所以在这种情况下我想从父组件更改子组件的状态。希望清楚，谢谢
先告诉我哪个是父母，哪个是孩子
我已编辑问题以使其更清晰，父级是 Leagues，子级是 Details
让我改述一下。您提到要使用 useImperativeHandle。仅当您想通过向子组件添加 ref 来从父组件触发子组件中的函数时才使用此选项。所以我要问的是联赛和细节组件之间的关系是什么。

标签： reactjs redux use-effect use-reducer use-ref

【解决方案1】：

我认为您的方法听起来是正确的，只是缺少调用您公开的 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} />
    </>
  )
}

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

【讨论】：

谢谢，我已经尝试过了，但是当我点击时，我仍然收到错误 TypeError Cannot read property 'cleanValue' of null
看起来你以错误的方式实现了<Details />，因为两者都使用 fowardRef 连接 Redux +。检查我为你修复的沙盒

【解决方案2】：

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

假设您想使用选定的团队（即 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]);

【讨论】：

谢谢，我想在更改联赛时动态删除最后选择的球队列，所以当我选择英超联赛时，必须为利物浦列删除圣保罗列
是的，我的代码应该可以解决您的问题，任何选定团队的更改都会更新整个 teams 数组，让我为您做一个小更新。
谢谢，我想我问的是更复杂的问题，如果你想在我的代码框中显示，那就更好了