javascript - 值未定义React JS Redux

Question

我想要实现的是从 url 加载数据并将其置于状态中，但“Ilceler”未定义。我得到了什么(TypeError:无法读取未定义的属性“ilceSelected”)，我做错了，任何人都可以帮助我吗？我对 redux 的核心概念( Action reducer 存储等)有点新，我想我是在操作文件中调用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;
    }
};

Answer 1

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

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

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

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