Question

基本上我有一个访问级别列表。我把它们放在列表和每个列表项的右侧我有一个开关。我想要实现的是让onPress事件更新我的状态，其中键是已按下的列表项。

列表数据的一部分。我无法控制关键名称。对于那个很抱歉。

accessList:
Array(51)
0:
{FormID: 101, FormName: "ApplicationSettingCheckStoreID", FormDesc: "Activate Device", IsShow: true, Note: "ApplicationSettingCheckStoreID"}
1:
{FormID: 145, FormName: "GiftCardAddFundList", FormDesc: "Add Fund", IsShow: true, Note: "Add Fund"}

我呈现它的方式

 <List>
    {
         this.state.accessList.map( (v, k) => {
            return (
               <ListItem key={v.FormID}>
                  <Row>
                     <Col size={80}>
                        <Text>{v.FormDesc}</Text>
                     </Col>
                     <Col size={20}>
                        <Switch  
                          value={v.IsShow}
                          onValueChange={() => this._switchToggled(v)} />
                      </Col>
                  </Row>
               </ListItem>
            );
         })
     }
   </List>

这是我试图正确填写的部分，但我已多次失败。

  _switchToggled = (listItem) => { 
       ...
  }

我非常感谢任何帮助。谢谢。

Answer 1

您使用什么进行州管理，即您的accessList集合是如何存储的？如果它来自redux，您可以传递一个动作，其中包含您要更新的项目的索引，如下所示：

_switchToggled = (listItem, index) => {

  this.props.dispatch(actions.updateToggle({ index, IsShow: !listItem.isShow });
}

您的actions.js文件看起来像这样：

const updateToggle = (payload) => {
  return {
    type: "UPDATE_TOGGLE",
    payload
  };
};

您的reducer看起来像这样：

const reducer = (state, action) => {
  case "UPDATE_TOGGLE":

    // create a copy of the data
    let clone = state.accessList.slice();

    // mutate the single item
    let item = clone[action.payload.index];

    let newItem = {
       ...item,
       IsShow: action.payload.isShow
    };

    // splice it into the clone
    let newAccessList = clone.splice(action.payload.index, 1, newItem);

    return {
      ...state,
      accessList: clone
    };

  default:
   return state;
};

因此，在您的reducer中，您实际上要复制数据结构以进行操作。这保留了Redux不应该直接改变state而是返回state的新表示的原则。访问accessList数组的索引很有帮助，并且允许您执行splice并返回项目，并更新isShow状态。如果我能通过这个例子帮助你，请告诉我。

在按下开关时React Native更新多维状态值

1 个答案: