NativeBase 列表未更新

Posted 2023-02-22

【中文标题】NativeBase 列表未更新

【英文标题】：NativeBase List not updating

【发布时间】：2018-12-06 00:59:34

【问题描述】：

所以我得到了一个看起来像的对象：

[
  
    title
    data: [
      
        id
        name
        checked
       
    ]
  ,
  ... ( * n item)
]

这些状态在 reducer 中，所以在 store 中。 当我点击一个项目时，我切换了选中状态。

减速器：

switch(action.type) 
    case TOGGLE_ITEM:
        const  row, column  = action.payload
        let newState = state.slice()
        newState[row].data[column].checked = !newState[row].data[column].checked
        console.warn(`the references are: $newState == state ? 'same' : 'different'`)
        return newState

以及组件（Screen连接到store）：

<List dataArray=list
                    renderRow=(item, sectionID, row) =>
                        <View>
                            <ListItem itemDivider>
                                <Text>
                                    item.title
                                </Text>
                            </ListItem>
                            <List dataArray=item.data
                                renderRow=(subitem, sectionID, column) =>
                                    <Item
                                        toggled=subitem.checked
                                        text=subitem.name
                                        onPress=()=>toggleItem(row, column)
                                    />
                                
                            />
                        </View>
export default connect(
    state=>(
        list: state.list
    ), 
        toggleItem
    
)(ListScreen)

当我切换某些东西时，我可以看到 store 中的状态发生了变化，并且我可以看到引用也发生了变化，但是 List 不会触发更新。 ：/

【参考方案1】：

你正在改变你的状态。这是针对 Redux 的。 您应该返回一份您所在州的副本。

  const newState = state.map((value, index) => 
    if (index != row) 
      return value
    

    return 
      ...value,
      data: value.data.map((dataValue, dataIndex) => 
        if (dataIndex != column) 
          return dataValue
        

        return 
          ...dataValue,
          checked: !dataValue.checked
        
      )
    
  )

注意：NativeBase 将返回一个“字符串”索引值。这就是我们不使用!== 的原因。您可以通过parseInt 将行和列转换为整数。