Reactjs 状态未映射到组件道具

我已经被这个错误困扰了一个上午，所以请帮帮我：）

我从外部源获取json，并尝试在React组件中显示它

这是我的密码：

import React, {Component}     from "react";
import {BrowserRouter, Route} from "react-router-dom";

import { Provider } from 'react-redux';
import store from './store'

import Home       from "./pages/Home";
import About      from "./pages/About";
import Contact    from "./pages/Contact";

class App extends Component {
    render() {
        return (
            <Provider store={store}>
                <BrowserRouter>
                    <div className="App">
                        <Route exact path="/" component={Home}/>
                        <Route exact path="/contact" component={Contact}/>
                        <Route exact path="/about" component={About}/>
                    </div>
                </BrowserRouter>
            </Provider>
        );
    }
}

export default App;

actions/index.js：

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

const middleware = [thunk];

const reducers = combineReducers({reducer});

export default createStore(reducer, composeWithDevTools(applyMiddleware(...middleware)));

import sanity from '../../sanity';

export const REQUEST_CONTENT = "REQUEST_CONTENT";
export const RECEIVE_CONTENT = "RECEIVE_CONTENT";

export const requestContent = () => ({
    type: REQUEST_CONTENT
});

export const receiveContent = (content) => ({
    type: RECEIVE_CONTENT,
    categories: content.filter(el => el._type === "category"),
    pictures: content.filter(el => el._type === "sanity.imageAsset")
});

const fetchContent = () => (dispatch) => {
    dispatch(requestContent());
    return sanity.fetch("*[_type == 'category' || _type == 'sanity.imageAsset']")
        .then(content => { dispatch(receiveContent(content)) });
};

export const fetchContentIfNeeded = () => (dispatch, getState) => {
    if (!getState().categories) dispatch(fetchContent());
};

最后，我的减速机：

import { RECEIVE_CONTENT , REQUEST_CONTENT } from "../actions";

export default (state, action) => {
    switch (action.type) {
        case RECEIVE_CONTENT:
            const { categories, pictures } = action;
            return {
                isFetching: false,
                categories,
                pictures
            };

        case REQUEST_CONTENT:
            return {
                isFetching: true,
            };

        default:
            return {
                categories: [],
                pictures: [],
            };
    }
};

---

我可以看到来自外部源的数据已被接收，并通过reducer等成功地放入存储区。关键是我没有在组件中看到类别和图片道具。我希望有人能指出我的错误

您尚未添加mapDispatchToProps函数。我们需要使用mapDispatchToProps来调度操作。因此，redux将使用更新的状态重新提交组件

//Update your componentDidMount like this
componentDidMount() {
    //Calls action declared in mapDispatchToProps

    //Here we are calling the fetchContentIfNeeded which is declared 
    //inside mapDispatchToProps to dispatch an action. 
    //Not the one(fetchContentIfNeeded) we imported from actions
    //called fetchContentIfNeeded
    this.props.fetchContentIfNeeded();
};

//Add to your code

//We need to have mapDispatchToProps for dispatch action to reducer
const mapDispatchToProps = dispatch => {
  return {
    // when we call fetchContentIfNeeded it will dispatch action fetchContentIfNeeded(imported from actions) to the reducer.
    fetchContentIfNeeded: () => dispatch(fetchContentIfNeeded()),
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Homecatalogus);

---

您尚未添加mapDispatchToProps函数。我们需要使用mapDispatchToProps来调度操作。因此，redux将使用更新的状态重新提交组件

//Update your componentDidMount like this
componentDidMount() {
    //Calls action declared in mapDispatchToProps

    //Here we are calling the fetchContentIfNeeded which is declared 
    //inside mapDispatchToProps to dispatch an action. 
    //Not the one(fetchContentIfNeeded) we imported from actions
    //called fetchContentIfNeeded
    this.props.fetchContentIfNeeded();
};

//Add to your code

//We need to have mapDispatchToProps for dispatch action to reducer
const mapDispatchToProps = dispatch => {
  return {
    // when we call fetchContentIfNeeded it will dispatch action fetchContentIfNeeded(imported from actions) to the reducer.
    fetchContentIfNeeded: () => dispatch(fetchContentIfNeeded()),
  }
}

export default connect(mapStateToProps, mapDispatchToProps)(Homecatalogus);

---

不幸的是，这不起作用。奇怪的是，我没有调用FetchContentIfNeedAction，但我确实看到它发生在我的redux开发工具中？但是我在react开发工具中看不到任何道具的痕迹……OP在组件中“手动”执行调度，而不使用

mapDispatch

。这不是推荐的方法，但应该有效，所以这不是问题所在。另外，如果您要使用

mapspatch

，比如

const-mapspatch={fetchContentIfNeeded}

。不幸的是，这不起作用。奇怪的是，我没有调用FetchContentIfNeedAction，但我确实看到它发生在我的redux开发工具中？但是我在react开发工具中看不到任何道具的痕迹……OP在组件中“手动”执行调度，而不使用

mapDispatch

。这不是推荐的方法，但应该有效，所以这不是问题所在。另外，如果您要使用

mapDispatch

，比如

const-mapDispatch={fetchContentIfRequired}

。this.props.dispatch（fetchContentIfRequired（））；应该是：this.props.dispatch（fetchContentIfNeeded）@Eran不是这样的不幸的是，它只有在我最后离开（）时才起作用。尝试使用redux记录器，这将有助于查找存储中的更改。this.props.dispatch（FetchContentIfRequired（））；应该是：this.props.dispatch（fetchContentIfNeeded）@Eran不是这样的不幸的是，它只有在我最后离开（）时才起作用。尝试使用redux logger，这将有助于找到存储中的更改。