重置 React 组件状态答案

【问题标题】：Resetting React component State重置 React 组件状态
【发布时间】：2020-10-20 14:04:58
【问题描述】：

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

 [
  { 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 }
]

我的组件将此数组作为道具并使用 setState 钩子设置它，即

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

然后我操作这个数组的副本（updatedMenu）并稍后设置它，即

    setMenuState(updatedMenu);

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

【问题讨论】：

你的意思是 menuData 变了？或者您只是在搜索 setMenuState(menuData) ？ ...不太清楚IMO
从哪里获得初始状态信息？

标签： reactjs state

【解决方案1】：

如果你只是想“重置”你的菜单状态，你仍然有你的道具：

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

所以你可以调用它来“重置”日期，也就是放回初始数据：

setMenuState(menuData)

【讨论】：