Блог

У меня есть фрагмент кода, который создает разделенный компонент множественного выбора на основе https://github.com/renrizzolo/react-native-sectioned-multi-select .

Это мой код:

 import React, { useState } from 'react';
import {I18nManager,View,Text,SafeAreaView,Image,SectionList,TouchableOpacity,TextInput,ScrollView,useWindowDimensions,Linking} from 'react-native';
import Icon from 'react-native-vector-icons/FontAwesome';
import SectionedMultiSelect from 'react-native-sectioned-multi-select';


export function SellWithUsFirstScreen3(props){
    
const items = [
  {  
    name: "Fruits",
    id: 0,
    children: [{
        name: "Apple",
        id: 10,
      },{
        name: "Strawberry",
        id: 17,
      },{
        name: "Pineapple",
        id: 13,
      },{
        name: "Banana",
        id: 14,
      },{
        name: "Watermelon",
        id: 15,
      },{
        name: "Kiwi fruit",
        id: 16,
      }]
  },
  {
    name: "Gems",
    id: 1,
    children: [{
        name: "Quartz",
        id: 20,
      },{
        name: "Zircon",
        id: 21,
      },{
        name: "Sapphire",
        id: 22,
      },{
        name: "Topaz",
        id: 23,
      }]
  },
  {
    name: "Plants",
    id: 2,
    children: [{
        name: "Mother In Law's Tongue",
        id: 30,
      },{
        name: "Yucca",
        id: 31,
      },{
        name: "Monsteria",
        id: 32,
      },{
        name: "Palm",
        id: 33,
      }]
  },
]


const [selectedItems,setselectedItems] = useState([]);



onSelectedItemsChange = (theitem) => {
  
  setselectedItems(prevState => [...prevState, theitem]);
}
console.log(selectedItems);

/////////
    return (
        <SafeAreaView style={{flex:1,backgroundColor:'white'}}>
            <View style={styles.container}>
                
                        <View>
                        <SectionedMultiSelect
                          items={items} 
                          uniqueKey='id'
                          subKey='children'
                          selectToggleIconComponent={<Icon name='folder' />}
                          dropDownToggleIconUpComponent={<Icon name='chevron-up' />}
                          dropDownToggleIconDownComponent={<Icon name='chevron-down' />}
                          selectedIconComponent={<Icon name='heart' />}
                          selectText='Choose some things...'
                          showDropDowns={true}
                          readOnlyHeadings={true}
                          onSelectedItemsChange={this.onSelectedItemsChange}
                          selectedItems={selectedItems}
                          IconRenderer={Icon}
                        />
                        </View>
                        
            </View>
        </SafeAreaView>
    );
}
 

Я получаю эту ошибку:

Ошибка типа: неопределенный не является объектом (вычисление ‘item [подраздел]’).

Я попробовал несколько изменений кода, но я все еще не могу получить тот же результат, что и исходные авторские видеоизображения.

Любая помощь, пожалуйста?

Я думаю, ваша проблема в том, что вам нужны двойные кавычки вокруг строк, поэтому uniqueKey=»дочерние элементы» для каждого из них. Также этого нет. поэтому вы должны преобразовать onSelectedItemsChange={this.onSelectedItemsChange} в onSelectedItemsChange={onSelectedItemsChange}