将组件重置为模态

Question

我有一个插入到模式中的组件，其中包括一个CheckListBox。每次模态启动时，都不会重置组件。我能怎么做？如何强制重置？我使用带有钩子的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;

在我的modal.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

反应生命周期事件可用于在呈现组件之前执行操作。可以在类组件中使用“ constructor（）”或“ componentDidMount（）”在呈现组件之前重置数据或任何其他操作。

由于您正在使用功能组件，因此可以使用React钩子通过'useEffect（）'模仿生命周期事件。