Question

我是redux的新手，无法从mapStateToProps访问状态。当用户输入文件夹名称并提交时，我正在尝试创建“文件夹”。我已经设法用一组文件夹名称更新了状态，但是无法管理访问文件夹阵列并使用它来创建我的Folder组件。

这里是一个容器组件，应该可以访问“文件夹”组件中的“文件夹”：

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;

当我更新商店中的数据时，

“文件夹”始终是未定义的。我不太确定自己在做什么错，我一直在研究Redux文档中的基础教程，但是认为我可能从根本上误会了某些东西。

这是我用来更新商店的代码：

减速器

import { combineReducers } from 'redux';

const initialState = {
    folders: []
}

function handleFolders(state = initialState, action) {
    switch(action.type) {
        case 'CREATE_FOLDER':
            return {
                ...state, folders: [
                    ...state.folders,
                    {
                        name: action.name
                    }
                ]
            }
        default:
            return state;
    }
}

let rootReducer = combineReducers({
    handleFolders
})

export default rootReducer;

“创建”文件夹的按钮：

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);

Answer 1

尝试将您的mapStateToProps方法更改为此：

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

合并减速器时，必须首先使用其名称访问它们。减速器称为handleFolders，它具有属性folders

无法从mapStateToProps访问更新的状态，未定义

1 个答案: