[英]Remove item from array in redux
I am trying to add/remove items from an array using redux, the items will add to the array but when I try to remove an item, it looks like it is mutating the array and adding items instead of removing 我正在尝试使用redux从数组中添加/删除项目,这些项目将添加到数组中,但是当我尝试删除项目时,它看起来像是在改变数组并添加项目而不是删除
my State looks similar to this after trying to add/remove items 尝试添加/删除项目后,我的州看起来与此类似
[item1, item2, [item1, item2]]
How can I remove items from my array? 如何从阵列中删除项目?
state 州
state.filtered.cities: []
Filter.js Filter.js
import React from 'react'
import styled from 'styled-components'
import { connect } from 'react-redux'
import * as actions from './actions'
class Filter extends React.Component {
handlecity = (city) => {
this.props.addCity(city)
}
handleRemoveCity = (city) => {
this.props.removeCity(city)
}
render() {
const options = [
'item1','item2'
]
return(
<Wrap>
{options.map((option,index) =>
<Cell>
<OptionWrap key={index} onClick={()=> this.handlecity(option)}>
{option}
</OptionWrap>
<OptionWrap key={index} onClick={()=> this.handleRemoveCity(option)}>
remove {option}
</OptionWrap>
{console.log(this.props.city && this.props.city)}
</Cell>
)}
</Wrap>
)
}
}
const mapStateToProps = state => ({
city: state.filtered.cities
})
const mapDispatchToProps = {
...actions,
}
export default connect(mapStateToProps, mapDispatchToProps)(Filter);
actions.js actions.js
import {
ADD_CITY, REMOVE_CITY
} from '../../Constants'
export function addCity(city) {
return {
type: 'ADD_CITY',
city
}
}
export function removeCity(city) {
return {
type: 'REMOVE_CITY',
city
}
}
reducer.js reducer.js
import {
ADD_CITY, REMOVE_CITY
} from '../Constants';
const cityReducer = (state = [], action) => {
switch (action.type) {
case ADD_CITY:
return [
...state,
action.city
]
case REMOVE_CITY:
return [
...state,
state.filter(city => city !== action.city),
]
default:
return state;
}
}
export default cityReducer;
Why not simply: 为什么不简单:
reducer.js reducer.js
import {
ADD_CITY, REMOVE_CITY
} from '../Constants';
const cityReducer = (state = [], action) => {
switch (action.type) {
case ADD_CITY:
return [
...state,
action.city
]
case REMOVE_CITY:
return state.filter(city => city !== action.city)
default:
return state;
}
}
export default cityReducer;
Your remove city reducer should look like 您的移除城市减速器应该看起来像
case REMOVE_CITY:
return [
...state.filter(city => city !== action.city),
]
Otherwise you're adding all the previous items plus the filtered list. 否则,您将添加所有先前的项目以及过滤后的列表。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.