Question

我正在为我的第一个＆＃39;大＆＃39; react-redux应用。我试图在组件之间映射react-redux状态，但似乎我错过了一些东西。

除了一件事之外，一切都像魅力一样：我的反应路线导航菜单工作正常，我的组件被渲染，按钮onClick事件没问题，我的休息api被调用，我用适当的json数据返回http 200被添加到redux商店（我猜）。

唯一不起作用的是 this.state 在TableRenderer.js中为空。

我得到的错误与redux状态映射有关：

未捕获的TypeError：无法读取属性＆＃39; json＆＃39;为null

App.js（主要课程）

const store = createStore(
    combineReducers({
        ...reducers,
        routing: routerReducer
    }),
    applyMiddleware(thunk)
)

const history = syncHistoryWithStore(browserHistory, store)

ReactDom.render(
    <Provider store={store}>
        <Router history={history}>
            <Route path='/' component={MainLayout}>
                <Route path='about' component={About}/>

                <Route path="list">
                    <Route path="people" component={PeopleList}/>
                </Route>

                <Route path='*' component={NotFound}/>
            </Route>
        </Router>
    </Provider>,
    document.getElementById('root')
);

PeopleList.js（我的主要成分）

export default class PeopleList extends React.Component {
    render() {
        return (
            <TableRenderer title='My 1st people list' />
        );
    }
}

TableRenderer.js（从redux商店读取数据并渲染）

export default class TableRenderer extends React.Component {
    render() {
    return (
        <div>
        <p style={STYLE.title}>{this.props.title}</p>
        <ActionBar />
        <table style={STYLE.table}>
            <thead style={STYLE.tableHead}>
            <tr>
                <th style={STYLE.td}>id</th>
                <th style={STYLE.td}>field 1</th>
                <th style={STYLE.td}>field 2</th>
                <th style={STYLE.td}>field 3</th>
            </tr>
            </thead>
            <tbody style={STYLE.tableBody}>
            {this.state.json.map(row => {
                return <RowRenderer key={row.id} row={row} />
            })}
            </tbody>
        </table>
        <ActionBar />
        </div>
    );
    }
}

ActionBar.js（它包含按钮和调度操作）

class ActionBar extends React.Component {
    render() {
        return (
            <div style={STYLE.actionBar}>
                <Button bsSize="xsmall"
                        onClick={() => this.props.doRefresh()}>
                    Refresh
                </Button>
                <Button bsSize="xsmall">Clear all from database</Button>
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        json: state.json
    };
};

const mapDispatchToProps = (dispatch) => {
    return {
        doRefresh: () => dispatch(fetchData())
    };
};

export default connect(mapStateToProps, mapDispatchToProps)(ActionBar)

TableAction.js（我的操作类）

const loadDataAction = (json) => {
    return {
        type: ActionType.GET_DATA,
        json: json
    }
};

export function fetchData() {
    return (dispatch) => {
        dispatch(loadDataAction(''));

        axios({
            baseURL: UrlConstant.SERVICE_ROOT_URL,
            url: 'list/people',
            method: 'get'
        })
            .then((response) => {
                if (response.status == 200) {
                    dispatch(loadDataAction(response.data));
                }
            })
            .catch((error) => {
                if (error.response) {
                    dispatch(loadDataAction(''));
                }
            });
    }
}

Reducers.js

const initialState = {
    json: ''
};

export default (state = initialState, action) => {
    return Object.assign({}, state, {
        json: action.json
    });
}

更新： 感谢Max Sindwani帮助解决了这个问题。有很多事情需要解决。

App.js（主要课程） 我的商店定义不正确

const store = createStore(
    combineReducers({
        response: reducer,
        routing: routerReducer
    }),
    applyMiddleware(thunk)
)

TableRenderer.js

{this.props.json} needs to be used instead of {this.state.json}

这个班级缺少连接人员。它在redux store和类语言环境 props 之间绑定数据（如果我是正确的）：

class TableRenderer extends React.Component {
    render() {
        return (
            <div>
                ...
            </div>
        );
    }
}

const mapStateToProps = (state) => {
    return {
        json: state.response.json
    };
};

export default connect(mapStateToProps)(TableRender)

Reducers.js

我的reducer也错了，因为没有switch语句，在初始阶段，存储被redux以错误的方式初始化。并且json的类型需要是数组，因为它包含多个项目。

const initialState = {
    json: []
};

export default (state = initialState, action) => {
    switch (action.type) {
        case ActionType.GET_DATA:
            return Object.assign({}, state, {
                json: action.json
            });
        default:
            return state;
    }
};

export default reduces;

那就是：）

Answer 1

该错误似乎与state将为空（因为没有定义初始本地状态）这一事实有关。 Redux旨在提供来自提供程序组件的单向数据流。您需要传递道具或从组件连接（尽管建议您仅连接顶级组件以避免丢失数据来源的位置）。每当reducer返回一个新的/更新的状态时，提供者再次将props传递给它的子节点并使它们重新渲染。尝试连接TableRenderer。这样的事情应该有效：

class TableRenderer extends React.Component {
    render() {
    return (
        <div>
        <p style={STYLE.title}>{this.props.title}</p>
        <ActionBar />
        <table style={STYLE.table}>
            <thead style={STYLE.tableHead}>
            <tr>
                <th style={STYLE.td}>id</th>
                <th style={STYLE.td}>field 1</th>
                <th style={STYLE.td}>field 2</th>
                <th style={STYLE.td}>field 3</th>
            </tr>
            </thead>
            <tbody style={STYLE.tableBody}>
            {this.props.json.map(row => {
                return <RowRenderer key={row.id} row={row} />
            })}
            </tbody>
        </table>
        <ActionBar />
        </div>
    );
    }
}

const mapStateToProps = (state) => {
    return {
        json: state.json
    };
};

export default connect(mapStateToProps)(TableRenderer);

请注意，在连接和映射状态之后，状态在组件中作为props存在。另请注意，如果使用map，则需要将json（如果尚未更改）更改为数组，并将初始状态保持为空数组。

此外，请检查以确保包含减速器。看起来你没有将一个密钥与json reducer相关联（假设routingReducer来自https://github.com/reactjs/react-router-redux）。尝试这样的事情 - https://jsfiddle.net/msindwan/bgto9c8c/

react-redux存储组件之间的映射问题

1 个答案: