React Redux 子组件看不到 props

Question

React Redux 子组件看不到 props。

它只是在控制台日志中显示历史、位置、匹配：

{history: {…}, location: {…}, match: {…}, staticContext: undefined}
history: {length: 9, action: "POP", location: {…}, createHref: ƒ, push: ƒ, …}
location: {pathname: "/person", search: "", hash: "", state: null, key: "zyl9jf"}
match: {path: "/person", url: "/person", isExact: true, params: {…}}
staticContext: undefined
__proto__: Object

这是我的减速器代码：

const initialState = {
  persons: [
    { id: 1, firstname: "John", lastname: "doe" },
    { id: 2, firstname: "Rojer", lastname: "Smith" }
  ]
};

export const PersonReducer = (state = initialState, action) => {
  return state;
};

export default PersonReducer;

这里是 rootReducer：

    import PersonReducer from "./PersonReducer";
import { combineReducers } from "redux";

export const rootReducer = combineReducers({
  person: PersonReducer
});

export default rootReducer;

这是我的索引文件：

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import App from "./App";
import * as serviceWorker from "./serviceWorker";
import CombineReducer from "../src/components/store/CombineReducer";
import { createStore } from "redux";
import { Provider } from "react-redux";

//window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()

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

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

serviceWorker.unregister();

这是我的组件应该显示的道具：

import React, { Component } from "react";
import { connect } from "react-redux";

export class PersonDetails extends Component {
  render() {
    console.log(this.props);

    return (
      <div>
        <h1>Person's information</h1>
      </div>
    );
  }
}

const mapStateToProps = state => {
  return { project: state.project.projects };
};

const mapDispatchToProps = {};

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

我做错了什么？

Answer 1

您的商店对象如下所示

{
 person: { persons: [] }
}

const mapStateToProps = state => {
  return { project: state.project.projects };
};

改成：

const mapStateToProps = state => {
  return { project: state.person.persons};
};