Reactjs 无法从MapStateTops访问更新状态，未定义

我是redux新手，从mapStateToProps访问状态时遇到问题。当用户输入文件夹名称并提交时，我试图创建一个“文件夹”。我已使用文件夹名称数组更新状态，但无法访问文件夹数组并使用该数组创建文件夹组件

以下是一个容器组件，该组件应允许访问“我的文件夹”组件中的“文件夹”：

import { connect } from 'react-redux';
import Folders from './Folders';

const mapStateToProps = state => {
    return {
        folders: state.folders
    }
}

const Cabinet = connect(
    mapStateToProps
)(Folders);

export default Cabinet;

以下是我试图从中访问状态的组件：

import React from 'react';
import Folder from './Folder';
import AddFolderButton from './AddFolderButton';

const Folders = ({ folders }) => (

            <div className="Folders">
                <h2>Folders</h2>
                <div className="Drawer">
                    {console.log(folders)}
                    <AddFolderButton /> 
                </div>
            </div>
)

export default Folders;

“创建”文件夹的按钮：

class AddFolderButton extends React.Component {
    constructor() {
        super();
        this.state = {
            isClicked: false,
        };
        this.handleClick = this.handleClick.bind(this);
        this.handleOutsideClick = this.handleOutsideClick.bind(this);
        this.textInput = null;
    }

    handleClick() {
        if(!this.state.isClicked) {
            document.addEventListener('click', this.handleOutsideClick, false);
        } else {
            document.removeEventListener('click', this.handleOutsideClick, false);
        }
        this.setState(prevState => ({
            isClicked: !prevState.isClicked
        }));
    }

    handleOutsideClick(e) {
        if(this.node.contains(e.target)) {
            return;
        }
        this.handleClick();
    }

    render() {    
        return(
            <div className="new-folder-input" ref={ node => {this.node = node;}}>
                {!this.state.isClicked && (
                <button className="add-folder-btn" onClick={this.handleClick} >
                    <FontAwesomeIcon icon={faPlus} size="4x"/>
                </button>
                )}
                {this.state.isClicked && (
                    <div className="folder-input">
                        <form onSubmit={e => {
                            e.preventDefault()
                            this.props.createFolder(this.textInput.value)
                            this.handleClick();
                        }}
                        >
                            <input ref={node => this.textInput = node} 
                                type="text"
                                value={this.state.value}
                                autoFocus 
                                placeholder="Enter folder name" />
                            <button type="submit">Add Folder</button>
                        </form>
                    </div>
                )}
            </div>
        );
    }
}

const mapDispatchToProps = dispatch => ({
    createFolder: name => dispatch(createFolder(name))
})

export default connect(
    null,
    mapDispatchToProps
)(AddFolderButton);

class AddFolderButton扩展React.Component{
构造函数（）{
超级（）；
此.state={
isClicked:错，
};
this.handleClick=this.handleClick.bind（this）；
this.handleOutsideClick=this.handleOutsideClick.bind（this）；
this.textInput=null；
}
handleClick（）{
如果（！this.state.isClicked）{
document.addEventListener（'click'，this.handleOutsideClick，false）；
}否则{
document.removeEventListener（'click'，this.handleOutsideClick，false）；
}
this.setState（prevState=>({
isClicked:！prevState.isClicked
}));
}
把手外侧咔嗒声（e）{
if（this.node.contains（e.target））{
返回；
}
这个。handleClick（）；
}
render（）{
返回(
{this.node=node；}}>
{！this.state.isClicked&&(
)}
{this.state.isClicked&&(
{
e、 预防默认值（）
this.props.createFolder（this.textInput.value）
这个。handleClick（）；
}}
>
this.textInput=节点}
type=“text”
value={this.state.value}
自动对焦
占位符=“输入文件夹名称”/>
添加文件夹
)}
);
}
}
const mapDispatchToProps=调度=>({
createFolder:name=>dispatch（createFolder（name））
})
导出默认连接(
无效的
mapDispatchToProps
)（AddFolderButton）；

尝试将

MapStateTrops

方法更改为：

const mapStateToProps = ({handleFolders: {folders}}) => ({
    folders
});

---

当您组合减速器时，您必须首先使用它的名称访问它们。您的减速机名为

handleFolders

，它有属性

文件夹

，就是这样！谢谢你，我甚至还没有考虑过我使用了组合传感器的事实。

const mapStateToProps = ({handleFolders: {folders}}) => ({
    folders
});