Реагирующий дочерний компонент не обновляется при обновлении родительского состояния

Question

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

//object in redux store
object :[{
      item: {
         name: 'item'1,
         selected: false
         },
      item:{
         name: 'item'1,
         selected: false
    }
   }]

Мой родительский компонент содержит FlatList, который отображает дочерний компонент:

//parent component
<FlatList
  data={this.props.object}
  renderItem={( object ) => <Object object={object.item} />}
  keyExtractor={object => object.id}
/>

Мой дочерний компонент содержит кнопку, которая переключает выбранное свойство каждого элемента. Желаемое поведение заключается в том, что стиль кнопки изменяется в зависимости от значения выбранного свойства. Мой дочерний компонент кнопки выглядит примерно так:

// child component
render(){
  return (
    <View>
       <Text>{this.props.name}</Text>
       <Button 
         title="toggle"
         buttonStyle={{backgroundColor: this.props.selected? 'red' : 'green'}}
         onPress={() => handling toggle by changing state in store, it works fine and 
         console.logs correctly}/>
    </View>
 );
}

После переключения кнопки состояние объекта меняется, и console.logs правильно, однако стиль кнопки обновляется только когда я go выходить и возвращаться на страницу, как будто дочерний компонент не обновляется.

Как я могу заставить стиль кнопки обновляться непосредственно при переключении кнопки? Спасибо

Answer 1

оказывается, что изменения, которые я делал в своем редукторе, не вызывали обновления компонента из-за неглубокого сравнения с равенством, выполняемого редуктором.

Я исправил, вернув это в моих редукторах

let obj = {...}
return { ...state, object: {...state.object}

вместо

let obj = {...}
return {...state, object: obj }

Answer 2

Дополнительная информация может помочь, но мои первоначальные мысли заключаются в том, что состояние переключения может не приводить к тому, что компонент FlatList принимает изменения, чтобы вызвать повторный рендеринг.

Это можно решить с помощью необязательный параметр extraData, который можно передать в компонент FlatList

https://reactnative.dev/docs/flatlist#extradata