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正确记录，但是仅当我外出并返回页面时，按钮的样式才更新，就好像子组件没有更新。 / p>

如何获取在按钮切换时直接更新的按钮样式？谢谢

Answer 1

更多信息会有所帮助，但我最初的想法是，切换状态可能不会导致FlatList组件获取更改以触发重新渲染。

这可以通过可选的extraData道具来解决，该道具可以传递到FlatList组件中

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

Answer 2

事实证明，由于redux执行的浅相等性比较，我在reducer中所做的更改未触发组件更新。

我通过将其退还给我的减速器来修复

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

代替

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

当父状态更新时，本机子组件不会更新

2 个答案: