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

Question

我有一个代表日历的复选框列表。 单击复选框时，相应的日历将作为数组添加到我的状态checkedTaskList中。

如何映射此checkedTaskList数组，并在未选中时从中删除日历？ 然后，我希望使用删除了未经检查的日历的新数组设置我的状态。

状态

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

日历复选框

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

setTaskChecked 函数

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

您可以使用Array.prototype.filter()来获取所有其他元素。

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

Answer 2

就像 Balastrong 说的那样，首先使用过滤器删除未选中的元素，您确认该元素有效。

我假设你接下来要做的是在设置数组后立即检查它，有点像

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

这将显示checkedTaskList 以前的内容，因为设置它的调用是异步的。

为了更准确地查看更改，您需要使用 useEffect() 并挂钩到 checkedTaskList，例如

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