时间戳

首页 > 解决方案 > 值未定义反应js redux

javascript - 值未定义反应js redux

问题描述

我想要实现的是从 url 加载数据并使其处于状态，但“Ilceler”未定义。我得到了什么（TypeError：无法读取未定义的属性'ilceSelected'）我做错了谁能帮助我......我是redux的核心概念（动作减速器存储等）我想我是在操作文件中调用 handleGetIlce fn 时出现问题

Main Widget
        <React.Fragment>
            <Ilceler />
            {props.address.ilceSelected ? <Mahalleler /> : null}
            {props.address.mahalleSelected ? <Sokaklar /> : null}
            {props.address.sokaklarSelected ? <Kapilar /> : null}
        </React.Fragment>


const Ilceler = (props) => {
    let [ fetchedData, setFetchedData ] = useState(false);

    useEffect(() => {
        const ilceUrl = 'URL';
        !fetchedData &&
            axios.get(ilceUrl).then((response) => response.data).then((ilceList) => {
                setFetchedData(true);
                let ilceler = [];
                ilceList.Aaa.Bb.C.forEach((ilce) => {
                    ilceler.push({
                        label: ilce.ADI,
                        value: ilce.ID
                    });
                });
                props.handleGetIlce(ilceler);
            });
    });

    return (
        <React.Fragment>
            <Select
                name='adresSelect'
                options={props.address.ilceler}
                onChange={props.handleIlceChange}
            />
        </React.Fragment>
    );
};

const mapStateToProps = (state) => ({
    address: state.address
});

const mapDispatchToProps = function(dispatch) {
    return bindActionCreators({ ...addressActions }, dispatch);
};

actions
export const actions = {
    handleGetIlce: (ilceler) => {
        return {
            type: GET_ILCE,
            payload: ilceler
        };
    }
}

reducers
import { GET_ILCE } from '../../constants';

export const initialState = {
    ilceler: []
};

export default (state = initialState, action) => {
    switch (action.type) {
        case GET_ILCE:
            return {
                ...state,
                ilceler: action.payload
            };
        default:
            return state;
    }
};

标签： javascriptreactjsredux

解决方案

您应该使用 react-redux 函数中的“连接”连接您的组件以访问您的商店并将其作为道具发送到您的组件


const mapStateToProps = (state) => ({
    address: state.address
});

const mapDispatchToProps = function(dispatch) {
    return bindActionCreators({ ...addressActions }, dispatch);
};

const MainWidgetConnected = connect(
  mapStateToProps,
  mapDispatchToProps
)(MainWidget);

推荐阅读