从 Redux 中的数组中删除项目

Question

我是 Redux 的新手，正在寻找一种方法来从 Redux 中的现有数组中删除 JSON 对象。我尝试了几种方法，但都没有奏效。减速器的代码如下：

const initialState = {serviceList: [{name: 'Ancestome', connectedAt: '08/03/2020'},{name: '23AndMe', connectedAt: '09/03/2020'},{name: 'Cancer Research UK', connectedAt: '09/03/2020'}]}


const serviceReducer = (state = initialState, action) => {
  let serviceList = [...state.serviceList]
  switch (action.type) {

    case DELETE_SERVICE:
        delete serviceList[action.id]

      return {
        ...state,   
        serviceList: serviceList
      };

    default:
      return state
  }
}

export default serviceReducer

File service.js

class Services extends React.Component {
  constructor(props) {
    super(props);
    this.addNewEle = false;
    this.state = {disabled: false};

  }

  afterAnimationComplete = () => {
        this.setState({ disabled: false });
      }


  deleteFromService = (id) => {

    this.props.deleteService(id);

    this.addNewEle = false;


    this.setState({disabled: false});
    LayoutAnimation.configureNext(LayoutAnimation.Presets.easeInEaseOut);

  }      
      render() {

        return (
          <View style={styles.container} >
               <Header
              placement="left"
              centerComponent={{ text: 'Service', style: { color: '#fff', fontSize: 24 } }}          
             />
            <ScrollView
              ref={scrollView => this.scrollView = scrollView}
              onContentSizeChange={() => {
                this.addNewEle && this.scrollView.scrollToEnd();
              }}
            >
              <View style={{ flex: 1, padding: 4 }}>
                {Object.keys(this.props.serviceList).map((id) => {
                  return (


                    <ServiceItem
                      key={id}
                      id={id}
                      item={this.props.serviceList[id]}
                      removeItem={(id) => this.deleteFromService(id)}
                      afterAnimationComplete={this.afterAnimationComplete}
                    />
                  )
                })}
              </View>
            </ScrollView>


          </View>
        );
      }
}

const styles = StyleSheet.create(
    {
      container: {
        flex: 1,
      },
      title: {
        backgroundColor: 'transparent',
        color: 'black',
        fontSize: 24,
        paddingLeft: 10,
        paddingTop: 50,
      }
    });

  const mapStateToProps = (state) => ({ serviceList: state.serviceReducer.serviceList });

  const mapDispatchToProps = (dispatch) => ({
        deleteService: (serviceItem) => {
            dispatch(deleteService(serviceItem));
        },
    });

  export default connect(mapStateToProps, mapDispatchToProps)(Services);

在上面的代码中，如果我从数组中删除一个条目但第二次尝试失败，它会起作用。例如，我删除了第一个（id = 0），然后保留了两个条目（id = {1,2}）。现在，如果我继续删除第二个条目（id = 1），它并没有删除这个条目，奇怪的是它返回了两个条目（id = {0,2}）！！！当我试图删除最后一个条目时发生了类似的事情。

我也试过下面的代码：

let newList = serviceList.slice(0, action.id).concat(serviceList.slice(action.id + 1));

     return {
        ...state,   
        serviceList: newList
      };

但是，如果我删除第一个，那么它会删除第一个和最后一个！！！

我不知道发生了什么，如果有人能提出正确的解决方案，我将不胜感激。谢谢

Answer 1

如果id 表示servicesList 中元素的索引，则可以使用数组的filter 方法删除某些元素。

您的删除方法将如下所示：

case DELETE_SERVICE:
  delete serviceList[action.id]

  return {
    ...state,   
    serviceList: serviceList.filter((e, index) => index !== action.id)
  };

此代码将从action 对象中过滤索引等于id 的元素。

Answer 2

谢谢大家。我发现我的动画列表视图存在问题，而不是 reducer 本身的问题。该问题现已关闭。