如何使用 redux(Flatlist 项单击)更新特定 json 数组项中的单个值?

问题描述

我有一个显示名称和状态的 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 数组项中的单个值?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！