Reactjs 使用MapStateTops时，状态为空

当我尝试将状态从存储映射到组件的属性时，状态为空。我试图获取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”导入{createStore}；
从“react redux”导入{Provider}；
从“/components/Redux/Reducer”导入rootReducer；
const store=createStore（rootReducer）；
ReactDOM.render（，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)

从“React”导入React，{Component}
从“react redux”导入{connect}；
从“/modal.module.css”导入样式；
导出类模式扩展组件{
render（）{
console.log（this.props）
返回(
{this.props.visible}
)
}
}
常量mapStateToProps=（状态）=>{
返回{
可见：state.visibles
}
}
导出默认连接（MapStateTops）（模式）

找到了原因。我必须重构Modal类以不使用“export class”，然后才能使用connect从存储中获取状态

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

    return (

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

类模态扩展React.Component{
render（）{
console.log（this.props）
返回(
{this.props.visible}
)
}}

找到了原因。我必须重构Modal类以不使用“export class”，然后才能使用connect从存储中获取状态

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

    return (

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

类模态扩展React.Component{
render（）{
console.log（this.props）
返回(
{this.props.visible}
)
}}

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