如何映射一组对象，删除一个并将我的状态设置为 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

setTaskCheked 函数

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]);
    }
  };

这是整个文件

imports...

export default function AddCalendarModal(props) {
  const [priority, setPriority] = useState(false);
  const [checkedTaskList, setCheckedTaskList] = useState([]);

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

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

  console.log("CHECKED TASKS" + JSON.stringify(checkedTaskList));
  console.log("CHEKCED TASKS LENGTH" + checkedTaskList.length);
  return (
    // <Modal visible={true} style={styles.container}>
    <View style={styles.container}>
      <TouchableOpacity onPress={props.clicked}>
        <Image source={require(".././assets/canceladdcalendar.png")} />
      </TouchableOpacity>
      <View style={{ top: "10%" }}>
        <View style={styles.headertext}>
          <Text style={{ fontSize: 24, fontWeight: "bold" }}>
            Manage Calendars
          </Text>
          <Text style={{ fontSize: 16, marginTop: "2%" }}>
            Select which calendars you’d like to see or add a new one.
          </Text>
        </View>
        <View style={{ marginTop: "5%" }}>
          {props.calendarData.map((calendar) => {
            return (
              <View key={calendar.summary} style={styles.calendaritem}>
                <CheckBox_1 checked={() => setTaskCheked(calendar)} />
                <View style={{ marginLeft: "3%" }}>
                  <Text>{calendar.summary}</Text>
                </View>
              </View>
            );
          })}
        </View>
      </View>
      <View
        style={{
          alignSelf: "center",
          position: "absolute",
          top: "50%",
        }}
      >
        <HearthButton
          backgroundcolor={"#1AA39B"}
          title={"Add a Calendar"}
          fontcolor={"white"}
          width={250}
        />
        <TouchableOpacity style={styles.deletecalendar}>
          <Text style={{ color: "#1AA39B", fontWeight: "bold" }}>
            Delete a Calendar
          </Text>
        </TouchableOpacity>
      </View>
    </View>
    
  );
}

styles...

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 以前的内容，因为设置它的调用是异步的。

编辑： 在您编辑之后，我想知道“c === true”是什么，以及它的作用。我稍微重写了 setTaskChecked，它对我有用。这是我的代码

const setTaskChecked = (calendar) => {
    if (checkedTaskList.indexOf(calendar) === -1) {
      console.log(calendar + " is now in array");
      setCheckedTaskList([...checkedTaskList, calendar]);
    } else {
      setCheckedTaskList(checkedTaskList.filter((cal) => cal !== calendar));
      console.log(calendar + " removed from array");
    }
  };

  useEffect(() => {
    console.log(checkedTaskList.length);
  }, [checkedTaskList]);