javascript - NativeBase 列表未更新

Question

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

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

这些状态位于 reducer 中，因此位于存储中。 当我单击某个项目时，我会切换选中状态。

reducer :

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)

当我切换某些内容时，我可以看到商店中的状态发生了变化，并且我可以看到引用也发生了变化，但列表不会触发更新。 :/

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