Компонент не перезагружается, но состояние изменяется с помощью useState

Question

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

Если они выбраны, отображается один значок, если нет, другой значок (я просто изменяю имя prop, а не сам компонент.

console.log, который я выполняю при каждом рендере, показываетправильные результаты, но он не работает должным образом на JSX.

Рендеринг, кажется, перезагружается (Показать правильный значок), когда я отменяю выбор. Объясняя в виде списка процедуру и мою проблему:

1. Все элементы выделены
2. Я отменяю выбор одного элемента (удалить из списка), значок меняется.
3. Я возвращаю элемент (добавить в список), значок не отображаетсяt change.
4. Я отменяю выбор другого элемента, затем он работает, и компоненты перезагружаются

Вот мой массив объектов:

const dies = [
  {
    id: 1,
    nomDia : 'Dies',
    dataDia : 'previs'
  },
  {
    id: 2,
    nomDia : 'Dies',
    dataDia : 'previs'
  },
  {
    id: 3,
    nomDia : 'Dies',
    dataDia : 'previs'
  }
]

Вот useSateобъявление:

const [diesSeleccionats, setDiesSeleccionats] = useState(dies)

Вот функции, которые проверяют, выбран ли, и функция, которая добавляет / удаляет из выбранного списка:

// check if selected
const estaSeleccionat = (dia) => {
    return diesSeleccionats.findIndex((aDia) => aDia.id === dia.id ) != -1
  }
// remove selected or add selected
const gestionarSeleccionats = (dia) => {
    if(estaSeleccionat(dia)){
      return diesSeleccionats.filter((aDia) => aDia.id !== dia.id)
    } else {
      diesSeleccionats.push(dia)
      return diesSeleccionats
    }
 }

Вот компонент:

   dies.map((dia) => (
                      <View key={dia.id} style={{flexDirection: 'row', marginTop: 5, alignSelf: 'flex-end'}}>
                        <TouchableOpacity
                          style={{backgroundColor: Colors.llistat1 + 'CC'}}
                          key={dia.id}
                          onPress={() => setDiesSeleccionats(gestionarSeleccionats( dia ))}
                        >
                            <Text style={{fontSize: 18, color: Colors.titolsPantalles}}> {dia.nomDia} </Text>
                        </TouchableOpacity>
                        <TouchableOpacity
                          style={{
                            minWidth: 24,
                            backgroundColor: Colors.llistat1 + 'CC',
                            marginLeft: 5,
                            paddingHorizontal:5,
                            justifyContent:'center', alignItems: 'center'}}
                          onPress={ () => setDiesSeleccionats(gestionarSeleccionats( dia ))}
                          >
                          <Ionicons name={ estaSeleccionat( dia ) ? "md-checkmark" : "md-close"} size={18} color={Colors.titolsPantalles} />
                        </TouchableOpacity>
                      </View>
                    ))

Вы можете видеть, чем <<em> Ionicons > имя приходит defв том случае, если элемент находится в выбранном списке.

Журнал, который я делаю при каждом повторном рендеринге, показывает правильные результаты.(Логическое значение функции проверки и правильные элементы в массиве объектов)

Спасибо.

Answer 1

Я думаю, что проблема связана с мутацией diesSeleccionats вместо ее копирования.Я думаю, вам нужно сделать копию этого, чтобы предоставить setDiesSeleccionats, чтобы React могла проанализировать различия и отобразить правильное обновленное состояние.

const gestionarSeleccionats = (dia) => {
    const selections = [...diesSeleccionats];
    if(estaSeleccionat(dia)){
      return selections.filter((aDia) => aDia.id !== dia.id);
    } else {
      selections.push(dia)
      return selections;
    }
 }