如何解决反应挂钩-从父组件调度重置状态
这是我的应用程序,其中已复制了场景,这里是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]);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。