Как исправить Uncaught TypeError: Не удается прочитать свойство 'getState' из неопределенного? - PullRequest
Новая
       22

Как исправить Uncaught TypeError: Не удается прочитать свойство 'getState' из неопределенного?

0 голосов
/ 10 ноября 2019

Я пытаюсь использовать React с Redux для внешней части с django rest framework в серверной части. Получил проблему getState в теге поставщика в компоненте приложения из-за проблемы в магазине. И когда я пытаюсь использовать функцию карты в Words.js, я получаю ошибку неопределенного использования карты. И я считаю, что это потому, что значение массива равно нулю. Следовательно, чтобы исправить эту ошибку 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"));

Они действуют для типов файлов types.js, используя django rest_framework для создания данных. 

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);

И, наконец, компонент приложения 

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;

1 Ответ

0 голосов
/ 10 ноября 2019

Ваш initialState имеет только words проп, поэтому при отображении его на подпорки у вас есть один дополнительный words уровень. Попробуйте изменить его на: 

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

Также вам нужно использовать mapDispatchToProps для getWords, поскольку в вашем текущем коде вам не хватает dispatch оболочки: 

const mapDispatchToProps = dispatch => ({
  getWords: () => dispatch(getWords())
})

export default connect(mapStateToProps, mapDispatchToProps)(Words);
...