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

问题描述

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

//状态{数据集：[{会话：[]}，{}，{}]}

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

我尝试使用切片方法

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

注意：IndexofDataset 表示点击了哪个数据集，index 表示点击了要删除的会话。我知道这只会返回一个数组，所以我尝试复制状态并用这个新创建的数组覆盖原始会话数组。在下面发布的代码中更有意义。

```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;
      }
    }
    ```

这是减速机。DELETE_DATASET 案例工作得很好，但我似乎无法复制该功能

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

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

```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;
```

会话表.js

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

我在 sessionTable 中得到的错误是 TypeError: Cannot read property 'map' of undefined。这是因为当前实现删除了所有会话，并且 sessionTable 试图映射一个空对象。

标签： javascriptreactjsreact-redux

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

问题描述

解决方案

推荐阅读