反応テーブル内のセルをクリックすると反応が遅くなる

Question

クライアントがUsersテーブルの特定のユーザーのEditリンクをクリックしたときに、「editUser」アクション作成者が返したアクションをディスパッチするにはどうすればよいですか？

import React, { Component } from 'react'; 
import { connect } from 'react-redux'; 
import {bindActionCreators} from 'redux'; 
import ReactTable from 'react-table'; 
import { editUser } from '../actions/users' 

class Users extends Component { 

    render() { 
     return (
      <div> 

       <ReactTable className="-striped " 
        data={this.props.users} 
        columns={columns} 
       /> 
      </div> 
     ); 
    } 
} 

const columns = [{ 
    id: 1, 
    header: 'Namn', 
}, { 
    id: 2, 
    header: '', 
    accessor: 'id', 
    render: (row) => (<a href="#">Edit</a> ), 
} 
]; 

function mapStateToProps(state) { 
    return { 
     users: state.users.users, 
    } 
} 

function matchDispatchToProps(dispatch) { 
    return bindActionCreators({ editUser }, dispatch) 
} 

export default connect(mapStateToProps, matchDispatchToProps)(Users); 

マイアクション作成者：クリックイベント

<ReactTable 
    getTdProps={(state, rowInfo, column, instance) => { 
    return { 
     onClick: e => { 
     editUser(rowInfo.userId) 
     } 
    } 
    }} 
/> 

の

export function editUser(user) { 
    return { 
     type: 'EDIT_USER', 
     user 
    } 
} 

Answer 1

世話はおそらく通常あなただけの必要最小限のデータを渡し、少しもあなたの行動を微調整する必要があります。この場合、ユーザーID。

Answer 2

どのように私はこれを見てeditUserアクションを持つ必要があるので、dataプロパティ、これをデータプロパティに追加しました。

const { users, editUser } = this.props 
const newUsers = users.map(r => { 
    return (
    {...r, editUser} 
) 
}) 

は、代わりに、列の描画方法内側data={this.props.users}使用data={ newUsers }

その方法の、row.editUserアクションとして利用可能です。