Question

我有一个存储对象数组状态的组件，例如：

 [
  { id: 'all', title: 'Select all', icon: '', selected: false },
  { id: 'overview', title: 'Overview', icon: 'user-check', selected: false },
  {
    id: 'about',
    title: 'About',
    icon: 'info-circle',
    selected: false,
    partSelected: false,
    children: [
      { id: 'profile', title: 'Profile', selected: false },
      { id: 'howToOnboard', title: 'How To Onboard', selected: false }
    ]
  },
  { id: 'interviewGuide', title: 'Interview Guide', icon: 'comments', selected: false }
]

我的组件将这个数组作为prop，并使用setState钩子对其进行设置。

const SelectionMenu = ({ menuData, translations }) => {
 
  const [menuState, setMenuState] = useState(menuData);
  
  const updatedMenu = menuData.map(a => ({...a}));

然后我操纵该数组的副本（updatedMenu），并稍后在其上进行设置。

    setMenuState(updatedMenu);

如何将状态重置回初始menuData？它似乎总是得到维护...

Answer 1

如果您只想“重置”菜单状态，那么您仍然可以在这里使用道具：

const SelectionMenu = ({ menuData, translations }) => {

因此，您可以调用它来“重置”又名返回初始数据的日期：

setMenuState(menuData)

重置React组件状态

1 个答案: