使用 mapStateToProps 时状态为空答案

【问题标题】：State is empty when using mapStateToProps使用 mapStateToProps 时状态为空
【发布时间】：2020-06-26 08:15:15
【问题描述】：

当我尝试将状态从商店映射到组件的属性时，状态为空。我尝试获取显示在 JSX 中的字符串的值，但它丢失了。我无法从 redux 商店中获取任何要显示的内容。

减速机：

const initialState = {
    visibles: "false",
    error: null,
    text: ""
  };

  const rootReducer = (
    state = initialState,
    action
  )  => {
    switch (action.type) {
      case "OPEN_MODAL":
        return {
          ...state,
          visibles: "true",
          error: null
        };

      default:
        return state;
    }
  }

  export default rootReducer;

和 index.js

import {createStore } from "redux";
import {Provider } from "react-redux";
import rootReducer from "./components/Redux/Reducer";

const store = createStore(rootReducer);

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

redux 商店的消费者


import React, { Component } from 'react'
import {connect} from "react-redux";
import styles from "./modal.module.css";


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

        return (

            <div className={styles.root}>
                <p className={styles.title}>{this.props.visible}</p>
            </div>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        visible: state.visibles
    }
}

export default connect(mapStateToProps)(Modal)

【问题讨论】：

“console.log(this.props)”输出一个空数组：{}

标签： reactjs redux state store

【解决方案1】：

找到原因。我不得不重构 Modal 类以不使用“导出类”，然后我可以通过连接从商店获取状态。

class Modal extends React.Component {
render() {
    console.log(this.props)

    return (

        <div className={styles.root}>
            <p className={styles.title}>{this.props.visible}</p>
        </div>
    )
}}

【讨论】：