スイッチ・プレスのネイティブ・アップデート多次元状態値

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; 
}; 

したがって、実際に減速機で操作するデータ構造のコピーを作成します。これにより、Reduxはstateを直接突然変異させるべきではなく、むしろstateの新しい表現を返すべきであるという原則が保持されます。 accessList配列のインデックスにアクセスすると便利です。spliceを実行して、isShow状態が更新されたアイテムを返すことができます。私がこの例でこれ以上あなたを助けることができるかどうかを教えてください。