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

Posted 2023-02-16

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

【英文标题】：How can I map through an array of objects, remove one and set my state as the new array in react-native?

【发布时间】：2021-12-08 13:20:37

【问题描述】：

我有一个代表日历的复选框列表。单击复选框时，相应的日历将作为数组添加到我的状态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...

【参考方案1】：

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

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

【讨论】：

这非常适合从数组中添加和删除选中的日历！但是如果我检查了 2 项，并且记录了“setCheckedTaskList”，那么数组中只有一项。

【参考方案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]);

【讨论】：

这仍然每次都在提醒我 1 ......它几乎就像在选择一个项目后没有任何东西被推送到数组......我认为 setCheckedTaskList(checkedTaskList.filter(cal => cal != calendar) 每次都在运行，因为此时它的长度 > 0，因此它永远不会到达 else 命令

你能用你的整个代码文件更新你的问题吗？

我没有更新它！