Question

因此，当我尝试访问新闻道具以在页面上显示新闻标题时，我会收到这样的错误：

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文件中的redux操作代码

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个单独的文件，我将在下面发布。同样通过执行该错误消息更改为此：

This is the new Error I am getting now

我的减速器文件如下：

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;

然后，我从redux存储所在的源文件夹之外的index.js中的reducer文件夹中导入rootReducer。这就是我在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();

现在，我的问题是我试图从操作中发送数据，但是减速器由于某种原因无法接收数据。

另一个错误现在弹出。 Another Error

未捕获（承诺）TypeError：无法读取未定义的属性“地图”

0 个答案: