Question

我要实现的是从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;
    }
};

Answer 1

您应该将组件与react-redux函数中的“连接”连接起来，以访问您的商店并将其作为道具发送给您的组件


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

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

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

值未定义react js redux

1 个答案: