如何映射对象数组，删除一个对象并将我的状态设置为 react-native 中的新数组？

Question

I have a list of checkboxes representing calendars. When a checkbox is clicked, the respective calendar is added to my state checkedTaskList as an array.

How can I map through this checkedTaskList array, and remove a calendar from it when it is unchecked? I wish to then set my state with the new array with the unchecked calendar removed.

STATE

const [checkedTaskList, setCheckedTaskList] = useState([]);

CALENDAR CHECKBOXES

<CheckBox_1 checked={() => setTaskCheked(calendar)} /> //Holidays
<CheckBox_1 checked={() => setTaskCheked(calendar)} /> //Birthdays
<CheckBox_1 checked={() => setTaskCheked(calendar)} /> //Events

setTaskCheked FUNCTION

const setTaskCheked = (calendar) => {
    if (checkedTaskList.length > 0) { //CHECK IF ARRAY IS EMPTY
     
      const tempCalendarList = checkedTaskList;
      tempCalendarList.map((cal) => {
        if (cal === calendar) { //CHECK IF SELECTED CALENDAR IS ALREADY IN checkedTaskList STATE
          const index = tempCalendarList.indexOf(cal);
          tempCalendarList.slice(index, 1);//REMOVED UNCHECKED CALAENDAR
          setCheckedTaskList(tempCalendarList);//SET STATE WITH NEW ARRAY WITH REMOVED CALENDAR
          
          
        }
        
      });
    } else {
      setCheckedTaskList([...checkedTaskList, calendar]);
    }
  };

Answer 1

You can use Array.prototype.filter() to get all other elements.

const setTaskCheked = (calendar) => {
    if (checkedTaskList.length > 0) {
      setCheckedTaskList(checkedTaskList.filter(cal => cal != calendar)
    } else {
      setCheckedTaskList([...checkedTaskList, calendar]);
    }
  };

Answer 2

Like Balastrong said, first use filter to remove the unchecked element, which you confirmed works.

What I'm assuming you're doing next is checking the array right after setting it, sorta like

setCheckedTaskList([...checkedTaskList, calendar]);
alert(checkedTaskList.length);

and this would show you the checkedTaskList's previous contents, as the call to set it is asynchronous.

To more accurately see the changes, you will need to utilize useEffect() and hook into the checkedTaskList, like

useEffect(() => {
    if (checkedTaskList.length > 0)
      alert(checkedTaskList.length);
  }, [checkedTaskList]);