Question

我正在尝试将Redux与React一起用于后端的django rest框架。由于商店中的问题，导致App组件的提供者标签中出现问题getState。当我尝试在Words.js中使用map函数时，出现未定义使用map的错误。而且我相信这是因为数组的值为null。因此，要修复此getState错误。即使未定义化简器，甚至在应用程序组件的提供程序中包含商店时，也会出现此错误。

当我加载静态数组时，它确实可以在特定组件中正确呈现。

这是Redux Store，位于文件名：store.js

import { createStore, applyMiddleware } from "redux";
import { composeWithDevTools } from 'redux-devtools-extension';
import thunk from 'redux-thunk';
import rootReducer from './reducers'

const initialState = {};

const middleware = [thunk];

const enhancer = composeWithDevTools(applyMiddleware(...middleware));

const store = createStore(
    rootReducer,
    initialState,
    enhancer
);

export default store;

index.js文件在下面

import App from './components/App'
import ReactDOM from 'react-dom';
import React from 'react';

ReactDOM.render(<App />, document.getElementById("app"));

他们使用django rest_framework来操作输入type.js文件来创建数据。

export const GET_WORDS = "GET_WORDS";

动作文件words.js

import { GET_WORDS } from "./types";
import axios from 'axios';


export const getWords = () => dispatch => {
    axios.get('/api/words/')
         .then(res => {
            dispatch({
                type: GET_WORDS,
                payload: res.data
            });
        }).catch(err => console.log(err));
}

组合的减速器文件

import { combineReducers } from "redux";
import words from './words';


export default combineReducers({
    words
});

减速器文件word.js

import { GET_WORDS } from '../actions/types';[enter image description here][1]

const initialState = {
    words: []
}

export default function (state = initialState, action) {
    switch (action.type) {
        case GET_WORDS:
            return {
                ...state,
                words: action.payload
            }
        default:
            return state;
    }
}

将在其中调用单词列表的组件：Words.js

import React, { Component, Fragment } from 'react';
import PropTypes from 'prop-types';
import { connect } from 'react-redux';
import { getWords } from "../../../actions/words";


export class Words extends Component {


    static propTypes = {
        words: PropTypes.array.isRequired,
        getWords: PropTypes.func.isRequired
    };

    componentDidMount() {
        this.props.getWords();
    }

    render() {
        return (
            <Fragment>
                Hi

            </Fragment>
        )
    }
}

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

export default connect(mapStateToProps, { getWords })(Words);

最后是App组件

import React, { Component, Fragment } from 'react';
import Footer from './Layout/Footer/Footer';
import Header from './Layout/Header/Header';
import WordsDashboard from './Content/Words/WordsDashboard';
import { store } from '../store';
import { Provider } from "react-redux";
import { Words } from './Content/Words/Words';

export class App extends Component {
    render() {
        return (
            <Provider store={store}>
                <Fragment>
                    <Header />
                    React Buddy
                    <Words />
                    <Footer />
                </Fragment>
            </Provider>
        )
    }
}

export default App;

Answer 1

您的componentDidMount(){ httpBase().get('clients/'+2) .then((response) => { this.setState({ userData: response.data.data, isFetching: false }) }) .catch((error) => { console.log('Error: ',error); }); this.setState({isFetching: false }) // Remove this line. }仅具有initialState个道具，因此，将其映射到道具时，您会有一个额外的words等级。尝试将其更改为：

words

此外，您还需要为const mapStateToProps = state => ({ words: state.words });使用mapDispatchToProps，因为在当前代码中您缺少getWords包装器：

dispatch

如何修复Uncaught TypeError：无法读取未定义的属性'getState'？

1 个答案: