1

我在使用 redux 的 blueprintjs 表时遇到问题。在这里，我试图通过 redux 维护行选择。我对 react/redux 还很陌生，所以也许我遗漏了一些东西？

我尝试了没有 redux 的相同组件（即选择修改了组件的状态）并且它工作正常，但我更喜欢使用 redux。

这是一个带有 redux 的最小示例（jsx）：

import React from "react"
import {Cell, Column, Table, SelectionModes, Regions, RegionLayer} from "@blueprintjs/table"
import ReactDOM from 'react-dom';
import {Provider, connect} from 'react-redux'
import {applyMiddleware, createStore} from 'redux';
import createLogger from 'redux-logger';


export class TableTestRedux extends React.Component {

    constructor(props) {
        super(props)
        this.state={}
    }

    componentDidUpdate() {
        console.log("TableTestRedux:componentDidUpdate props:", this.props)
    }

    onSelection(e) {
        console.log("TableTestRedux:onSelection e:", e)
        if (e.length > 0) {
            var selectedRow = e[0].rows[0]
            this.props.onSelectedEdgeOverrideIdx(selectedRow)
        }
    }

    getSelectedRegion() {
        var region = this.props.selectedEdgeOverrideIdx != null ? [Regions.row(this.props.selectedEdgeOverrideIdx)] : []
        console.log('TableTestRedux:getSelectedRegion returns ', region);
        return region
    }

    render() {
        console.log('TableTestRedux:render props:', this.props);

        const renderCell = (rowIndex) => <Cell>{this.props.edgeOverrides[rowIndex]}</Cell>;
        return (
            <div>
                <Table ref="table" numRows={this.props.edgeOverrides.length} onSelection={(e) => this.onSelection(e)}
                       allowMultipleSelection={false}
                       selectionModes={SelectionModes.ROWS_ONLY}
                       selectedRegions={this.getSelectedRegion()}>
                    <Column name="Description" renderCell={renderCell}/>
                </Table>
            </div>
        )
    }
}

// --- redux container/smart component


const mapStateToProps = (state) => {
    console.log("TableTestRedux:mapStateToProps ", state);
    return {
        edgeOverrides: state.edgeOverrides ? state.edgeOverrides : [],
        selectedEdgeOverrideIdx: state.selectedEdgeOverrideIdx

    }
}

const mapDispatchToProps = (dispatch) => {
    console.log("TableTestRedux:mapDispatchToProps ");
    return {
        onSelectedEdgeOverrideIdx: (selectedEdgeOverrideIdx) => {
            dispatch(OverrideEntryActions.selectEdgeOverrideIdx(selectedEdgeOverrideIdx))
        }
    }
}

export const TableTestReduxCC = connect(mapStateToProps, mapDispatchToProps)(TableTestRedux)


// --- redux action and reducer

export class OverrideEntryActions {

    static selectEdgeOverrideIdx(selectedEdgeOverrideIdx) {
        return {
            type: 'SELECT_EDGE_OVERRIDE_IDX',
            selectedEdgeOverrideIdx: selectedEdgeOverrideIdx
        }
    }
}


const initialOverrideEntryState = {
    selectedEdgeOverrideIdx: null,
    edgeOverrides: ["bla", "blabla", "more blabla"]
}

export const overrideEntryReducer = (state = initialOverrideEntryState, action) => {
    console.log("overrideEntryReducer: action:", action, " state:", state)
    switch (action.type) {
        case 'SELECT_EDGE_OVERRIDE_IDX':
            return {selectedEdgeOverrideIdx: action.selectedEdgeOverrideIdx}
        default:
            return state
    }
}

// --- launch


var store = createStore(overrideEntryReducer, applyMiddleware(createLogger()))

ReactDOM.render((
    <Provider store={store}>
        <TableTestReduxCC/>
    </Provider>
), document.getElementById('app'))

当我单击行标题时，会调用 TableTestRedux.render()，这会导致所有表格单元格为空白。日志显示：

警告：NaN是heightcss 样式属性的无效值。检查RegionLayer.

4

1 回答 1

1

问题出在 overrideEntryReducer 方面，我正在擦除状态的 edgeOverrides 属性。这是修复：

  case 'SELECT_EDGE_OVERRIDE_IDX':
            return {...state,selectedEdgeOverrideIdx: action.selectedEdgeOverrideIdx}
于 2017-02-09T09:35:06.350 回答