道具的打印值，由mapStateToProps从redux传递到组件

Question

问题：

我无法显示redux状态的值，该状态由mapStateToProps函数传递给组件。

项目结构：

Create-react-app CLi应用程序构建了该项目。 在src /内部，我具有以下代码结构

必要的代码：我们正在与之交互的主页看起来像这样：

计划在下面发布单击按钮的结果。

那么，如何将redux状态和操作绑定到这两个组件：Calculator和ResultLine？

让我展示创建商店的index.js代码：

import React from "react";
import ReactDOM from "react-dom";
import { Provider } from "react-redux";
import { createStore } from "redux";
import reducers from './reducers/';

import App from './components/App';

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

只有三个动作：

import {CALCULATE, ERASE, PUT_SYMBOL} from "./types";

export const putSymbol = (symbol) => {
    return {
        type: PUT_SYMBOL,
        payload: symbol
    }
};

export const calculate = () => {
    return {
        type: CALCULATE
    }
};

export const erase = () => {
    return {
        type: ERASE
    }
};

在App.js中，我传递了reducers，并将其与那些动作绑定到Calculator组件：

import React, {Component} from 'react';
import Calculator from './Calculator';
import ResultLine from "./ResultLine";
import {calculate, erase, putSymbol} from "../actions/index";
import {connect} from "react-redux";

class App extends Component {

  render() {
    return (
      <div>
        <Calculator
          onSymbolClick={this.props.onSymbolClick}
          onEqualsClick={this.props.onEqualsClick}
          onEraseClick={this.props.onEraseClick}/>
        <br/>
        <ResultLine result={this.props.result}/>
      </div>
    );
  }
}

const mapStateToProps = (state) => {
  console.log('mapState', state.calc.line);
  return {
    result: state.line
  }
};

const mapDispatchToProps = {
  onSymbolClick: putSymbol,
  onEqualsClick: calculate,
  onEraseClick: erase
};

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

那很好。 每当我单击按钮时，状态都会改变，并且会在控制台日志中观察到它，该事件在mapStateToProps函数中调用。

因此，我希望可以轻松地将结果道具传递到Result行，并将其作为参数传递给ResultLine组件。 因此，让我们看一下该元素：

import React from 'react';

const ResultLine = ({result}) => {
  return (
    <p>{result}</p>
  );
};

export default ResultLine;

而且我看不到结果行中有任何更改。 也许，React / Redux生命周期管理和ResultLine组件出了点问题，只是状态变化没有更新？

Answer 1

mapStateToProps发生错误。

代替：

const mapStateToProps = (state) => {
  return {
    result: state.line
  }
}

请用：

const mapStateToProps = (state) => {
  return {
    result: state.calc.line // calc was missing here
  }
}