Arrays 值仅从React.useffect（）内部的数组中移除，而不是从它外部移除，但增加的值保持增加状态

我是个新来的人。我正在使用复选框，这些复选框应该按书籍类别过滤书籍列表。选中复选框会向组件发送一个值，如果该值已存在于数组中，则该值会添加到数组中或从数组中删除

此时会出现主页面筛选图书列表：book.list.js

import CategoriesFilter from '../components/CategoriesFilter';

let array = [];

const AllBooks = () => {

const [categories, setCategories] = React.useState([]);
const [bookList, setBookList] = React.useState([]);
const [allBooks, setAllBooks] = React.useState([]);
setBookList(data_from_database);
setAllBooks(data_from_database);
setCategories(data_from_database);

return (
  <div>
    <table>
      <CategoriesFilter
                    categories={categories}
                    bookList={bookList}
                    allBooks={allBooks}
                    array={array}
                    filterBooks={(e) => setBookList(e)}
                     />
    </table>
   <ul>
     <ListBooks bookList={bookList}/>   // diferent const which returns a list of books
   </ul>
  </div>
)};

从“../components/CategoriesFilter”导入CategoriesFilter；
让数组=[]；
const AllBooks=（）=>{
const[categories，setCategories]=React.useState（[]）；
const[bookList，setBookList]=React.useState（[]）；
const[allBooks，setAllBooks]=React.useState（[]）；
setBookList（来自数据库的数据）；
setAllBooks（来自数据库的数据）；
setCategories（来自数据库的数据）；
返回(
setBookList（e）}
/>

//返回书籍列表的different const

)};

带有复选框过滤器的页面：Categories.filter.js

export default function CategoriesFilter({ categories, bookList, listBooks, array, filterBooks }) {
  const [searchTermCategories, setSearchTermCategories] = React.useState('');

  React.useEffect(() => {
    
    if (searchTermCategories) {
      if (array?.toString().includes(searchTermCategories.toString())) {
        array = array.filter((a) => a.toString() !== searchTermCategories.toString());
        // this above removes a value if it already exists in array, 
        // the value stays removed only inside React.useEffect()
      } else {
        if (array[0] === '') {
          array[0] = searchTermCategories;    //value is added to array
        } else {
          array.push(searchTermCategories);   //value is added to array
        }
      }
    }

    //next I'm filtering the books and removing the ones who doesn't have checked categories

     filterBooks(filteredBooks);   // assigning final book list

   }, [searchTermCategories]); // don't really know if it should be here but it works so...

  const categ = categories?.map((cat) => {
      return (
        <tr>
          <td>
            <label>
              <input
                type="checkbox"
                className="filterBox"
                value={cat.NameOfTheCategory || ' '}
                onChange={(e) => setSearchTermCategories(e.target.value)}
              />
              {cat.NameOfTheCategory}
            </label>
          </td>
        </tr>
      );
    });

  return <tbody className="categoriesDivBox">{categ}</tbody>;
}

导出默认函数CategoriesFilter（{categories，bookList，listBooks，array，filterBooks}）{
const[searchTermCategories，setSearchTermCategories]=React.useState（“”）；
React.useffect（（）=>{
if（搜索术语类别）{
if（数组？.toString（）.includes（searchTermCategories.toString（）））{
array=array.filter（（a）=>a.toString（）！==searchTermCategories.toString（））；
//如果数组中已经存在一个值，则上述操作将删除该值，
//该值仅在React.useffect（）中保持移除状态
}否则{
if（数组[0]=''）{
数组[0]=searchTermCategories；//将值添加到数组中
}否则{
array.push（searchTermCategories）；//值被添加到数组中
}
}
}
//接下来，我将过滤这些书籍，并删除那些没有检查类别的书籍
filterBooks（filteredBooks）；//分配最终图书列表
}，[searchTermCategories]）；//我不知道它是否应该在这里，但它非常有效。。。
常数类别=类别？.map（（类别）=>{
返回(
setSearchTermCategories（e.target.value）}
/>
{cat.nameofCategory}
);
});
返回{categ}；
}

添加到数组中的值将显示在Book.list.js中。已删除的值仅保留在React.useffect（）中删除。 我怎样才能解决这个问题？我希望在Book.list.js中删除已删除的值，以便打印正确的结果

另外，如果我连续两次或多次按下同一复选框，只有第一个操作被注册，我如何解决这个问题