Question

这是代码沙箱：https://codesandbox.io/s/lp005rj59q

我希望它显示Hello Goodbye，但它只是显示Goodbye

我正在为我正在使用的新React / Redux应用程序构建框架，<h1>{value}</h1>返回未定义。我知道这一点是因为我将console.log（value）放在类的render和return方法之间。

我已经将状态映射到道具：

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

创建了我的商店：

import { createStore } from "redux";
import reducers from "./reducers";

const store = createStore(reducers);

export default store;

创建了初始状态为“ Hello”的减速器

const initialState = {
  value: "Hello"
};

function reducer(state = initialState, action) {
  switch (action.type) {
    default:
      return state;
  }
}

export default reducer;

创建了一个连接功能：

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

为this.props添加了价值：

export class Clock extends React.Component {
  render() {
    const { value } = this.props;
    console.log(value);
    return (
      <div>
        <h1>{value}</h1>
        <h2> Goodbye</h2>
      </div>
    );
  }
}

并将商店传递给provider元素：

const AppWrapper = () => (
  <Provider store={store}>
    <Clock />
  </Provider>
);

render(<AppWrapper />, document.getElementById("root"));

我想念什么？

Answer 1

您要从 Clock.js 导出两个React组件：

谓词组件Clock命名为导出Clock
容器组件，它是通过Clock函数将演示组件redux连接到connect的结果。这是默认导出。

但是在 index.js 中，您只是导入了表示性组件Clock：

import {Clock} from "./Clock";

相反，您应该导入容器组件：

import Clock from "./Clock";

请注意没有大括号。您可以在GitHub issue

上了解有关es6模块的更多信息

React Redux骨架从状态返回未定义的值

1 个答案: