反应原生元素复选框使用反应钩子选择多个项目

Question

我需要一些帮助来解决这个问题。我正在使用带有复选框的反应原生元素平面列表。我也在用这个反应钩子。一切正常，但是当我尝试选择复选框中的一项时，它会选择所有项。现在我在使用组件而不是钩子和函数之前遇到过这个问题。我尝试使用我在这里使用的相同方法Selecting multiple items

像这样……

function ViewCategoryWS2({navigation}) {
    const {category, setCategory} = useContext(ItemContext);
    const [eats, setEats] = useState([]);
    const [checked, toggleChecked] = useState(false); 
   
    function back() {
        navigation.navigate('MenuWS2');
    }
    
    function test(index) {
        const foods = category;
        foods[index].checked = !foods[index].checked;
        setCategory(foods);

    }
  
    return (
        
        <View style={styles.container}>
            
         
            <Icon 
                name='arrow-left'
                color="#000000"
                size={25}
                style={styles.menuIcon}
                onPress={back}
            />
          
            <FlatList
                data={category}
                //extraData={eats}
                keyExtractor={(item, index) => index.toString()}
                renderItem={({ item, index }) => (
                    <CheckBox 
                        center 
                        titleProps={{ color: 'black', fontWeight: 'bold'}}
                        title={item}
                        iconRight
                        checked={checked}
                        onPress={() => test(index)}
                        size={30}
                        containerStyle={styles.checkBox} 
                    />  
                    
                )}
            />
     
        
        </View>
       
    )
    

}

并且我不断收到此错误 TypeError: Attempted to assign to readonly property。我也试过这种方式...

         <FlatList
                data={category}
                //extraData={eats}
                keyExtractor={(item, index) => index.toString()}
                renderItem={({ item, index }) => (
                    <CheckBox 
                        center 
                        titleProps={{ color: 'black', fontWeight: 'bold'}}
                        title={item}
                        iconRight
                        checked={checked}
                        onPress={() => toggleChecked(!checked)}
                        size={30}
                        containerStyle={styles.checkBox} 
                    />  
                    
                )}
            />

这是我的代码来自上下文的来源。这个页面我从我的数据库中提取数据并显示类别。我点击任何类别，它会从我的数据库中提取分配给被点击的特定类别的数据..

这里是代码...

import ItemContext from '../context/CategoryItems';

export default function menuWS({navigation}) {
    const [restaurantlocationcode, setRestaurantlocationcode] = useState('')
    const [menu, setMenu] = useState([]);
    const {category, setCategory} = useContext(ItemContext);
    const [selected, setSelected] = useState(0);

    function viewMenu() {
        fetch('URL', {
            method: 'POST',
            body: JSON.stringify({ restaurantlocationcode: restaurantlocationcode}),
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
        })
        .then(response => response.json())
        .then(response=> setMenu(response));
        console.log(menu);
        alert(menu);

    }
    
    function viewCategory({item}) {
        fetch('URL', {
            method: 'POST',
            body: JSON.stringify({
                category: item,
                restaurantlocationcode: restaurantlocationcode,
            }),
            headers: {
                'Accept': 'application/json',
                'Content-Type': 'application/json',
            },
        })
        .then(response => response.json())
        .then(response => {
            setCategory(response);
            console.log(response);
            alert(response);
        });
        navigation.navigate('ViewCategoryWS2', {category});
        
    }

    function showMenu() {
        console.log(menu);
        alert(menu);
    }

    
    const buttons = ['Menu']

    return (
        
        <View style={styles.container}>
            <Input
                style={styles.Input} 
                placeholder='Restaurant Location Code'
                leftIcon={
                    <Icon
                    name='location-arrow' 
                    size={24}
                    color='black'
                    />
                }
                onChangeText={setRestaurantlocationcode}
                value={restaurantlocationcode}
                underlineColorAndroid='transparent'
            />

            <ButtonGroup
                onPress={viewMenu}
                selectedIndex={selected}
                selectedButtonStyle={{backgroundColor: 'blue'}}
                buttons={buttons}
                containerStyle={styles.buttonGroup} 
            />


            <FlatList 
                data={menu}
                extraData={category}
                keyExtractor={(item, index) => index.toString()}
                renderItem={({item, index}) => (
                    <ListItem
                    titleStyle={{ color: 'black', fontWeight: 'bold'}}
                    title={item}
                    onPress={() => viewCategory({item})}
                    bottomDivider
                    chevron
                    />
                )}
            />
        
        </View>
        
    )

}

这是我的 useContext 代码...

import { createContext } from 'react';

const ItemContext = createContext({});

export default ItemContext;

这是我的 useContext 代码的第二部分..

import React, {useState} from 'react';
import ItemContext from './CategoryItems';

const MenuItemState = ({children}) => {
    const [category, setCategory] = useState([]);
    return (
        <ItemContext.Provider value={{category, setCategory}}>

            {children}
        </ItemContext.Provider>
    )
}

export default MenuItemState;

它只是选择所有项目。我不确定我错过了什么。我们将不胜感激。

Answer 1

应用输出：

import React, { useState } from 'react';
import { Text, View, StyleSheet, CheckBox, Icon, FlatList } from 'react-native';
// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

/*
I am using this data, but you can continue
with the one you getting from context
*/
const data = [
  { id: 1, title: 'one', checked: true },
  { id: 2, title: 'two', checked: false },
  { id: 3, title: 'three', checked: false },
  { id: 4, title: 'four', checked: false },
  { id: 5, title: 'five', checked: false },
  { id: 6, title: 'six', checked: false },
];
export default function App() {
  const [category, setCategory] = useState(data);
  const [eats, setEats] = useState([]);
  const [checked, toggleChecked] = useState(false);

  function back() {
    // navigation.navigate('MenuWS2');
  }

  function test(index) {
    /* 
      Use this approach while changing the state. 
      This will create the copy of original array, 
      and you can perform mutation there 
      and update state with it.
    */
    console.log(index);
    const foods = [...category];
    foods[index].checked = !foods[index].checked;
    setCategory(foods);
  }

  /* 
    In your Checkbox component, 
    use "onChange" prop instead of "onPress" 
    and "value" instead of "checked" 
  */

  return (
    <View style={styles.container}>
      <FlatList
        data={category}
        //extraData={eats}
        keyExtractor={(item, index) => index.toString()}
        renderItem={({ item, index }) => (
          <Card style={{ padding: 10, margin: 5 }}>
            <Text>{item.title}</Text>
            <CheckBox
              center
              titleProps={{ color: 'black', fontWeight: 'bold' }}
              title={item}
              iconRight
              value={item?.checked}
              onChange={() => test(index)}
              size={30}
              containerStyle={styles.checkBox}
            />
          </Card>
        )}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    marginTop: 24,
    backgroundColor: 'grey',
    flex: 1,
  },
});

工作示例：Expo Snack