Question

我问过类似的问题，这里已经回答了，但这只是针对 Reactjs ，而不是针对 react redux 。 Reactjs shows only first record each time a modal pop up button is clicked

这里试图在单击查看按钮时通过 React Redux 在Bootstraps Modal Popups上显示记录。

类似地，我在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（） 模式视图

这是我的减速器文件

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状态结构是什么，但是您应该使用分派来更新它，然后使用this.props.rec代替this.rec

在模式视图中显示记录时，React Redux引发错误

1 个答案: