React Native 复选框纸不单独检查

Question

我目前正在构建一个待办事项列表生产力应用程序，并使用 https: //callstack.github.io/react-native-paper/checkbox-item.html 我通过 firebase 循环遍历我的用户待办事项，并为每个待办事项添加一个复选框。然而，当他们检查时，所有待办事项都会被检查，而不是单个待办事项。解决办法是什么？ 代码：

import React, { useEffect } from 'react';
import {useState} from "react"
import { SafeAreaView, Text, View, Button, TouchableOpacity, Modal, StyleSheet,Pressable, TextInput,ImageBackground, Image, ScrollView,  } from 'react-native';
import { collection, doc, setDoc, query, getDocs, onSnapshot, addDoc, orderBy, limit, Timestamp, where} from "firebase/firestore"; 
import {db} from "../firebase"
import { auth } from '../firebase';
import AsyncStorage from '@react-native-async-storage/async-storage';
import { AntDesign } from '@expo/vector-icons'; 
import { Feather } from '@expo/vector-icons'; 
import { NavigationContainer } from '@react-navigation/native';
import { createNativeStackNavigator } from '@react-navigation/native-stack';
import { Checkbox } from 'react-native-paper';
import {signPlsOut} from "../firebase"

export  const Dashboard = () => {
  const image = { uri: "https://cdn.discordapp.com/attachments/901614276748402820/946157600041476176/Screen_Shot_2022-02-23_at_4.32.16_PM.png" };
  const {uid, photoURL, displayName} = auth.currentUser;
  const projectsref =  collection(db, "projects");
  const [modalVisible, setModalVisible] = useState(false);
  const [projects, setProjects] = useState([])
  const [desc, setDesc] = useState("");
  const [title, setTitle] = useState("");
  const [checked, setChecked] = React.useState(false);

  useEffect(() => {
    const getData = async () => {
      const q = await query(projectsref, where('uid', '==', uid), orderBy("createdAt"))
      onSnapshot(q, (snapshot) => {
        let todos = []
        snapshot.forEach((doc) => {todos.push(doc.data())})
        setProjects(todos)
      })
    }
    getData()
  }, [])
  async function handleAddTask () {
    try {
      await addDoc(projectsref, {
        title: title,
        desc: desc,
        createdAt: Timestamp.fromDate(new Date()),
        uid: uid,
      }) 
      setTitle("")
      setDesc("")
      setModalVisible(false)
    }
    catch(error) {
      console.log('There has been a problem with your fetch operation: ' + error.message);
      // ADD THIS THROW error
      throw error;
    }
  }
  return (
   <SafeAreaView style={{
    flex: 1,
    display: "flex",
    justifyContent: 'space-between',
    margin: 20,
    flexDirection: "column", 
  }}>
     <View style={{
       flex: 1,
       marginTop: 20
     }}>
        <View style={{marginBottom: 20, display: "flex", flexDirection: "row", justifyContent: "space-between"}}>
          <View style={{display: "flex", flexDirection: "row"}}>
          <Image source={{uri: "https://cdn.discordapp.com/attachments/856542608171073616/947245168191496212/Screen_Shot_2022-02-26_at_4.33.30_PM.png"}} style={{width: 50, height: 50}}></Image>
          <View style={{marginLeft: 20, display: "flex", justifyContent: "space-between"}}>
            <Text style={{fontSize: 17, fontWeight: "700"}}>{auth.currentUser.email}</Text>
            <Text style={{color: "grey", fontSize: 15}}>Good Morning 
              

Answer 1

您必须分别为每个 ToDo 指定一个状态。

为此，您可以创建一个数组状态来存储检查 ToDo 的 id

 const [checked, setChecked] = React.useState([]);

 {projects.map((doc, key) => (
      <View key={key} style={{
        backgroundColor: "#fff",
        borderRadius: "20px",
        padding: 10,
        marginTop: 20, 
        width: 130, 
        marginLeft: 20
      }}>
        <Checkbox
        status={checked.find((item) => item === doc.id) ? 'checked' : 'unchecked'} 
        onPress={() => {
         if(checked.find((item) => item === doc.id)) {   //Verify if the ToDo id exist on checked state
           setChecked(checked.filter((item) => item !== doc.id));  //Sets the checked state to an array without the current doc.id
         } else {
           setChecked([...checked, doc.id)]   // add the current ToDo doc.id to the checked state
         }
        }}
       />
      <Text style={{
        color: "#000",
        fontSize: 30, 
        fontWeight: "700"
      }}>{doc.title}</Text>
      <Text style={{
        color: "#000",
        fontSize: 20
      }}>{doc.desc}</Text>
    </View>
 ))}

这个逻辑是我现在能想到的逻辑，我不知道这是否是最好的方法，但我希望它有所帮助