Question

在我的react应用程序中，我有三个并行组件。在我的第一个组件中，我正在进行API调用，并根据响应将流路由到Validated或Non-Validated Component。

将用户路由到经过验证的组件后，单击时会出现一个按钮，应将用户重定向到另一个组件，该组件应将API响应（第一个组件）中的数据显示为键值对。我正在使用Redux进行状态管理。

我面临的问题是数据从存储中作为一个空对象分发。我不确定哪里出错了，但是在调试应用程序时，我发现操作没有被分派到商店，并且总是返回我的初始状态。

action.js-

export const setPoiData = (poiData)  => dispatch => {
    console.log('inside actions');
    dispatch({
        type: SET_POI_DATA, 
        payload: poiData
    })
}

Reducer.js-

const initialState = {
    poiData: {},
}

const reducerFunc = (state = initialState, action)  => {
    switch (action.type) {
        case SET_POI_DATA:
        console.log('inside poi reducers');
            return {...state,poiData: action.payload}    
        default: return {...state}
    }
}

Component 1-

//API call

详细组件-

要从存储中获取数据，我正在做如下操作-

componentDidMount() {
    console.log(this.props.poiData)
 }

function mapStateToProps(state) {
    return {
        poiData: state.poiData,
    }
}

const mapDispatchToProps = dispatch => ({
  setPoiData(data) {
    dispatch(setPoiData(data));
  }
})

我不确定我要去哪里。有人可以建议我如何进行此操作吗？

Answer 1

在 componentDidMount（）内部，您必须调用类似this.props.setPoiData(<your data here>);

的操作

如何在其他组件中获得作为道具的价值

1 个答案: