Question

我在使用redux的blueprintjs表时遇到了麻烦。在这里，我试图通过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是height css样式属性的无效值。检查RegionLayer的呈现方法。

Answer 1

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

<platform name="android">
    <icon src="resources/android/icon/icon.png" />
    <splash src="resources/android/splash/screen.png" />
</platform>

blueprintjs表与redux

1 个答案: