NativeBase 列表未更新

Question

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

[
  {
    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 连接到商店）：

<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)

当我切换某些东西时，我可以看到存储中的状态发生了变化，我也可以看到引用也发生了变化，但是列表不会触发更新。 :/

Answer 1

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

  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 将 return 一个 "string" 索引值。这就是我们不使用 !== 的原因。您可以通过 parseInt.

将行和列转换为整数

NativeBase 列表未更新

NativeBase List not updating

javascript

react-native

redux

reducers

rerender