React Redux 在模态视图中显示记录时抛出错误

Question

我已经问过类似的问题，在这里已经得到了回答，但它仅适用于 Reactjs，而不适用于 react redux。 Reactjs shows only first record each time a modal pop up button is clicked

当单击视图按钮时，我尝试通过 React Redux 在 Bootstraps 模式弹出窗口上显示记录。

同样，我在 React Redux 数组中有 9 条记录。

     { "name" : "Tony", "Age" : "18"},
     { "name" : "John", "Age" : "21" },
     { "name" : "Luke", "Age" : "78" },
     { "name" : "Mark", "Age" : "90" },
     { "name" : "Jame", "Age" : "87" },
     { "name" : "Franco", "Age" : "34" },
     { "name" : "Franco", "Age" : "34" },
     { "name" : "Biggard", "Age" : "19" },
     { "name" : "tom", "Age" : "89" },

代码显示所有记录，每条记录都有其模态视图 按钮。遇到的问题是每次我单击任何记录的查看按钮以便在模式中显示记录 查看，会显示错误

bundle.js:58831 Uncaught TypeError: _this.rec is not a function
    at Applications._this.viewData 

下面是代码

    import React from 'react';
    import { Link } from 'react-router-dom';
    import { connect } from 'react-redux';

    import { UActions } from '../_actions';

    class Applications extends React.Component {

      constructor(props) {
            super(props);
            this.state = {
              currentRec: undefined,
            };
        this.viewData = this.viewData.bind(this);
       }

       componentDidMount() {
          this.rec=this.props.dispatch(userActions.getAll_Records());
       }

     // Display Data in a Modal when View button is Clicked
     viewData = (i) => {
        //this.setState({ currentRec: i });
        this.rec({ currentRec: i });
        console.log(`Selected record index: ${i}`);
      }

        render() {
          const { user, users } = this.props;
          return (
             <div className="ml">
                    <div className="responsive-table">
            {users.items &&        
              <table className="table table-bordered table-striped">
                            <thead>
                            <tr>
                                <th>ID</th>
                                <th>Name</th>
                                <th>Age</th>
                                <th >view</th>
                            </tr>
                            </thead>
                            <tbody>
                            {users.items.map((user, i) =>
                               <tr key={user.id}>
                                  <td>{user.id}</td>
                                  <td>{user.name}</td>
                                  <td>{user.Age}</td>
                                  <td  className="btn btn-primary btn-sm"><button
                                    type="button"
                                    onClick={() => { this.viewData(i); }}
                                    className="btn btn-primary btn-sm"
                                    data-toggle="modal"
                                    data-target="#myModal"
                                     >
                                   view from Modal
                                </button>
                                </td>
                            </tr>
                            )}
             </tbody>
          </table>
        }
    </div>

    //Modal Start
     <div className="modal" id="myModal">
              <div className="modal-dialog">
                <div see={this.see} className="modal-content">
                  <div className="modal-header">
                    <h4 className="modal-title">Show Records in Modal</h4>
                    <button type="button" className="close" data-dismiss="modal">
                      &times;
                    </button>
                  </div>

                  {this.state.currentRec !== undefined && 
                      <div className="modal-body">
                        Name: {this.rec[this.state.currentRec].name} <br />
                        Age: {this.rec[this.state.currentRec].Age} <br />
                      </div>}

                  <div className="modal-footer">
                    <button
                      type="button"
                      className="btn btn-danger"
                      data-dismiss="modal"
                    >
                      Close
                    </button>
                  </div>
                </div>
              </div>
            </div>
    //Modal Ends
    </div>
            );
        }
    }


    function mapStateToProps(state) {
        const { users } = state;
        const { user } = state;
        return {
            user,
           users
        };
    }

const connectedApplications = connect(mapStateToProps)(Applications);
export { connectedApplications as Applications };

更新

如果我实现this.props.rec=this.props.dispatch(userActions.getAll_Records());

它会显示错误 TypeError：无法添加属性rec，对象不可扩展 在 Applications.componentDidMount

我认为问题在于 ViewData() 方法中的 setState() 阻止记录显示在 模态视图

这是我的 reducer 文件

import { userConstants } from '../_constants';

export function users(state = {}, action) {
  switch (action.type) {

case userConstants.GETALL_REQUEST:
  return {
    ...state,
    loading: true
  };
case userConstants.GETALL_SUCCESS:
  return {
    loading: false,
    error: null,
    items: action.users
  };

Answer 1

此行不正确：

this.rec=this.props.dispatch(userActions.getAll_Records());

当您使用 disptach 时，您将数据发送到您的 redux 存储。您应该通过 mapStateToProps 函数获取更新后的状态值。你不应该使用this.rec

您尚未向我们展示您的 redux 状态结构是什么，但您应该使用您的 dispatch 更新它，然后使用 this.props.rec 代替 this.rec