javascript - 如何从复杂的数据结构中删除特定项，同时保留 React-redux 中的状态？

Question

我当前的状态结构如下所示:

//state { datasets:[ { sessions:[] }, {}, {} ] }

最初数据集显示在表格上。选择特定数据集后，它会以表格格式显示该数据集中的所有 session 。我正在尝试从中删除一个 session 并返回整个修改后的状态。

我尝试过使用切片方法

return[ ...state.datasets[IndexofDataset].sessions.slice(0,action.index), ...state.datasets[IndexofDataset].sessions.slice(action.index +1) ];

注意:IndexofDataset 代表点击了哪个数据集，index 代表点击了哪个 session 被删除。我知道这只会返回一个数组，因此我尝试制作状态的副本并用这个新创建的数组覆盖原始 session 数组。在我下面发布的代码中更有意义。

```javascript
    function getDataset(state = {}, action) {
      return [...state.slice(0, action.index), ...state.slice(action.index + 1)];
    }

    function getSessions(state = {}, action) {
      console.log(state);
      return [
        ...state.datasets[action.studyID].sessions.slice(0, action.index),
        ...state.datasets[action.studyID].sessions.slice(action.index + 1)
      ];
    }

    export default function metadata(state = {}, action) {
      switch (action.type) {
        case "DELETE_DATASET":
          return {
            //take the current state
            ...state,
            // overwrite this dataset with a new one
            datasets: getDataset(state.datasets, action)
          };

        case "DELETE_SESSION":
          return {
            ...state,
            datasets: getSessions(state, action)
          };

        default:
          return state;
      }
    }
    ```

这是 reducer 。 DELETE_DATASET 情况工作得很好，但我似乎无法复制该功能

```javascript
export function deleteSession(studyID, index) {
  return {
    type: "DELETE_SESSION",
    studyID,
    index
  };
}
```

这是在 session 表上按下删除按钮时触发的操作。

```javascript
import React, { Component } from "react";
import { Link } from "react-router-dom";
import SessionTable from "../backend/SessionTable";

import { bindActionCreators } from "redux";
import { connect } from "react-redux";
import * as actionCreators from "../../../actions/actionCreators";

class Sessions extends Component {
  handleDelete = (studyID, index) => {
    this.props.deleteSession(studyID, index);
  };

  render() {
    return (
      <div className="container">
        <h1>Sessions</h1>
        <SessionTable
          data={this.props.metadata}
          index={this.props.match.params.studyID}
          onDelete={this.handleDelete}
        />
      </div>
    );
  }
}

function mapStateToProps(state) {
  return {
    metadata: state.metadata
  };
}

function mapDispatchToProps(dispatch) {
  return bindActionCreators(actionCreators, dispatch);
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(Sessions);
```

这是呈现 sessionTable 的组件，一旦您单击 sessionTable 行上的删除按钮，它就会向该组件引发一个 onDelete 事件，然后调用 deleteSession 操作函数。

```javascript
class SessionTable extends Component {
  render() {
    return (
      <React.Fragment>
        <table className="table">
          <thead>
            <tr>
              {/* display row with all table column titles */}
              {header.map((h, i) => (
                <th key={i} i={i}>
                  {" "}
                  {h}{" "}
                </th>
              ))}
            </tr>
          </thead>
          <tbody>
            {/* display all sessions with in the specified study*/}
            {this.props.data.datasets[this.props.index].sessions.map(
              (data, i) => (
                <tr key={i} i={i}>
                  <td i={i}>
                    <Link to={this.url(i, this.props.index)}>{data.name}</Link>
                  </td>
                  <td>{data.start_time}</td>
                  <td>{data.end_time}</td>
                  <td>{data.date_created}</td>
                  <td>
                    <button
                      onClick={() => {
                        this.props.onDelete(this.props.index, i);
                      }}
                      className="btn btn-danger btn-sm"
                    >
                      Delete
                    </button>
                  </td>
                </tr>
              )
            )}
          </tbody>
        </table>
      </React.Fragment>
    );
  }
}

export default SessionTable;
```

SessionTable.js

DELETE_DATASET 返回数据集数组被已删除相应数据集的新数组覆盖的状态。我想用 DELETE_SESSION 案例复制此功能，但它似乎不起作用。

我在 sessionTable 中收到的错误是 TypeError: 无法读取未定义的属性“map”。这是因为当前的实现删除了所有 session ，并且 sessionTable 正在尝试映射一个空对象。

Answer 1

这是我的方法。可能不是最有效的，但它确实有效

 function getSessions(state = [], action) {
      console.log(state);
      return [
        ...state.map((el, idx) => {
            if (action.studyID === idx){
                    return {
                    ...el,
                    sessions:[...el.sessions.slice(0, action.id), ...el.sessions.slice(action.id + 1)]
                }
            }
            return el;   
        })
      ];
    }

function metadata(state = {}, action) {
      switch (action.type) {
        case "DELETE_DATASET":
          return {
            //take the current state
            ...state,
            // overwrite this dataset with a new one
            datasets: getDataset(state.datasets, action)
          };

        case "DELETE_SESSION":
          return {
            ...state,
            datasets: getSessions(state.datasets, action)
          };

        default:
          return state;
      }
    }