Uncaught (в обещании) TypeError: Невозможно прочитать свойство 'map' из неопределенного - PullRequest
0 голосов
/ 15 февраля 2019

Итак, когда я пытаюсь получить доступ к своим новостным реквизитам для отображения заголовка новостей на своей странице, я получаю сообщение об ошибке, подобное этому:

Ошибка Msg

import React, { Component } from 'react';
import Search from './Search';
import { connect } from 'react-redux';
import NewsItem from './NewsItem';

class NewsResults extends Component {
    render() {
        return (
            <div>
                <Search />
                {this.props.news.map(item => {
                    return <NewsItem new={item} key={item.objectID} showButton={true}/>
                })
            }
            </div>
        )
    }
}

function mapStateToProps(state) {
    console.log(state)
    return {
        news: state.news
    }
}

export default connect(mapStateToProps, null)(NewsResults);

NewsItem.js - это просто компонент, с помощью которого я буду отображать результаты в своем приложении.

import React, { Component } from 'react';

class NewsItem extends Component {
    render(){
        return(
          <div className="col-sm-12 col-sm-3">
            <div className="thumbnail">
              <div className="caption">
                <h3>{this.props.new.title}</h3>
              </div>
            </div>
          </div>
        )
    }
}

export default NewsItem;

Здесь я получаю информацию из API, а затем хочу отобразить на своемстраница с использованием карт

class Search extends Component {

    constructor(props) {
      super(props);

      this.state = {
        query: ''
      };
    }

    search(){
        console.log('Search button clicked', this.state.query);
        let url = `http://hn.algolia.com/api/v1/search_by_date?query=${this.state.query}`;
        // console.log(url);
        fetch(url, {
            method: 'GET'
        }).then(response=> response.json())
        .then(jsonObject => {this.props.news(jsonObject.results)});
    }

Это мой код действия редукса в файле action.js

export const NEWS = "NEWS";

export function news(items) {
    const action = {
        type: NEWS,
        items
    }
    return action;
}

Это файл редуктора

import { NEWS } from '../actions';

const initialState = {
    news: []
}

export default function (state= initialState, action) {
    switch(action.type) {
        case NEWS:
            console.log("News are ",action.items);
            return {
                ...state,
                news: action.items
            };
        default:
            return state;
    }
};

Так что теперь у меня естьизменил мой редуктор, чтобы быть в 2 отдельных файлах, которые я опубликую ниже.Кроме того, сообщение об ошибке изменилось на следующее:

Это новая ошибка, которую я получаю сейчас

Мои файлы редуктора приведены ниже:

import { NEWS } from '../actions';

export default function news(state = [], action) {
    switch(action.type) {
        case NEWS:
            console.log("News are ",action.items);
            return action.items;
        default:
            return state;
    }
}

Второй файл редуктора:

import news from './news_reducer';
import { combineReducers } from 'redux';

const rootReducer = combineReducers({
    news
});

export default rootReducer;

Затем я импортирую свой rootReducer из папки редуктора в index.js вне исходной папки, где находится мое хранилище редукторов.Вот как я создаю свой магазин в index.js

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

import { Provider } from 'react-redux';
import { createStore } from 'redux';
import rootReducer from './reducers';

const store = createStore(rootReducer, 
    window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__());

ReactDOM.render(
    <Provider store={store}>
        <App />
    </Provider>
    , document.getElementById('root'));
registerServiceWorker();

Теперь моя проблема в том, что я пытаюсь отправить данные из действий, но по какой-то причине редуктор не получает их.

Еще одна ошибка появилась сейчас. Другая ошибка

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...