Question

所以我得到了一个看起来像的物体：

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

这些状态在减速器中，所以在商店中。当我点击一个项目时，我会切换选中的项目。

减速器：

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

和组件（屏幕已连接到商店）：

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

当我切换某些内容时，我可以看到商店中的状态已更改，并且可以看到引用也已更改，但是List不会触发更新。：/

Answer 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将行和列转换为整数。

NativeBase列表未更新

1 个答案: