React Native: структура списка флажков - PullRequest
Новая
       16

React Native: структура списка флажков

1 голос
/ 01 мая 2020

A user объект имеет массив prop schools, который ссылается на один или несколько школьных объектов. Я хотел бы использовать <List> с <CheckBox> для преобразования массива schools.

Я загружаю объект user в представление и загружаю listOfSchools (из состояния приложения ) для создания списка флажков: 

<List data={listOfSchools} keyExtractor={ item=> item._id } renderItem={({item})=>renderItem(item)} />

Функция renderItem: 

const renderItem = (school) => {

    return <ListItem
        title={school.name}
        accessory={()=>renderAccessory(school)}
    />
};

Функция renderAccessory: 

const renderAccessory = (school) => {
    return <CheckBox checked={() => checkSchool(school._id)} onChange={()=>changeSchool(school._id)} />
}

checkSchool Функция возвращает логическое значение, если ссылка на school._id указана в массиве user.schools. Функция changeSchool добавляет или удаляет school._id из массива users.schools.

Функция changeSchool: 

const changeSchool = (schoolId) => {
    let checked = checkSchool(schoolId);
    if (!checked) {
        // add schoolId to user.schools
    } else {
        // remove schoolId from user.schools
    }
}

Это радикально не работает. Похоже, что независимо от того, что я использую для изменения состояния, флажки никогда не обновляются, а массив user.schools не изменяется.

Как правильно структурировать такую ​​цель дизайна?

1 Ответ

1 голос
/ 01 мая 2020

Предполагая, что вы используете UI Kitten, я вижу, что вы неправильно указали значение checked prop для компонента CheckBox.

Ссылка CheckBox для UI Kitten CheckBox

checked реквизит должен быть boolean не вызываемым, поскольку он у вас есть

Я бы попытался изменить код следующим образом: 

const renderAccessory = (school) => {
    const isChecked = checkSchool(school._id);
    return <CheckBox checked={isChecked} onChange={()=>changeSchool(school._id)} />
}

Дайте мне знать если бы это помогло.

...