如何使用 redux(Flatlist 项单击)更新特定 json 数组项中的单个值? [英] How to update single value inside specific json array item using redux (Flatlist item click)?

问题描述

我有一个显示名称和状态的 Flatlist，我想通过单击 flatlist 项单击来切换用户的状态.为此，我创建了 redux action 和 redux reducer.但无法更改当前状态.

I have a Flatlist with displaying name and status, I want to toggle status of the user by clicking the flatlist item click. I have created the redux action and redux reducer for this purpose .But unable to change the curresponding status.

itemClick (item,index) {
  const value=false;
  this.props.listItemClick({props:'status',value});
  }


 export default (state = INITIAL_STATE, action) => {
     switch (action.type) {
        case LIST_CLICK:
        console.log(action.payload.props);
            return {...state,[action.payload.props]: action.payload.value};
        default:
            return state;

    }
};

但不能更改与指定用户对应的状态.例如 Raj 状态为 false

but not able change status corresponding to specified user. for example Raj status to false

{
"response": [{
  "name": "RAJ",
   "status": true

 }, {
 "name": "RAM",
  "status": true,

}]
}


  <FlatList
     showsVerticalScrollIndicator={false}
     removeClippedSubviews={false}
     data={this.props.response}
     ItemSeparatorComponent = {this.flatListItemSeparator}
     ListFooterComponent={this.flatListItemSeparator}
     keyExtractor={(item, index) => index}
     renderItem={({item,index}) => this.renderFlatListItem(item,index)}/>

推荐答案

我不知道这是否正是您想要实现的目标，但我会尝试一下.

I don't know if this is exactly what you are trying to achieve, but i'll give it a try.

//call Action 
this.props.listItemClick('RAJ',false});

//Action
export const listItemClick = (user,status) => {
    return {
        type: LIST_CLICK,
        payload: { user, status }
    };
}; 

 export default (state = INITIAL_STATE, action) => {
     switch (action.type) {
        case LIST_CLICK:
            //replace YOUR_DATA with your state var 
            return {...state, YOUR_DATA: [state.YOUR_DATA.map((val,index) => {
                   if (val.name === action.payload.user) {
                      return { ...val, status: action.payload.status };
                   }
                   return { ...val };
            })]};
        default:
            return state;

    }
};

这篇关于如何使用 redux(Flatlist 项单击)更新特定 json 数组项中的单个值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！