将组件重置为模态

Question

我有一个插入模态的组件，其中包括一个清单框。每次模式启动时，不会重置组件。我该怎么办？如何强制复位？我使用带有钩子的 reactjs。 如何在每次模式打开时触发重置事件？ 多谢。

const CheckList = ({title, api, color, onChange }) => {
const [items, setItems] = useState([]);
let listCheck = [];
useEffect(() => {
axiosApi.get( `${api}`).then((res)=>{
setItems(res.data);      
})
}, [])
function handleClick(ev, item) {
if  (ev.target.checked) {
listCheck.push(item)
onChange(listCheck);
}
else 
{
listCheck = listCheck.filter(riga => {
return (riga.id !== item.id)});
onChange(listCheck);
}
}
return (    
<> 
<div class="card rd-card-list">
<div  class="card-header">
{title}
</div>
<div  class="card-content rd-card-content">
<div class="content rd-scroll">
<ul class="rd-ul">
{  items.map( (item) =>   
<li class="rd-li" key={item.id}>
<label class="checkbox">
{item.description}
</label>
<input type="checkbox" onClick={(ev) => handleClick(ev, item)}/>
</li>
)
}
</ul>
</div>
</div>
</div>
</>
);
}
export default CheckList;

在我的模态中.js

<CheckList  title="mytititle" api="/api/users" onChange={(itx) => {
formik.setFieldValue('users', itx)
} }/> 

Answer 1

最简单的方法是在模式打开之前不渲染模式：

<div>
{modalOpen &&
<Modal open={modalOpen}>
<CheckList  title="mytititle" api="/api/users" onChange={(itx) => {
formik.setFieldValue('users', itx)
} }/> 
</Modal>
}
</div>

因此，每当您关闭模态时，它都会从 DOM 中删除，以及该组件具有的任何数据。

Answer 2

React 生命周期事件可用于在渲染组件之前执行操作。"constructor(("或"componentDidMount(("可以在类组件中使用，以便在渲染组件之前重置数据或任何其他操作。

由于你使用的是函数组件，你可以使用 React 钩子来模拟生命周期事件，使用 'useEffect(('。