Question

我正在实施一个项目，其中数据将在不同的组件中共享。所以我决定使用redux-react进行状态管理。我使用redux反应async api调用从api获取数据。但是，当组件首次安装并返回实际数据时，我得到了未定义。但是，当我试图在返回的数据上实现一些函数时，我得到了无法读取未定义的属性。我可以在redux开发人员工具中看到状态，它有数据和日志功能正确显示操作。我无法理解为什么我会变得不明确。这是我的代码

const initialState = {  
    candidate: {},
    companies: [], 
    offers: [], 
    moreStatehere:...
  }

候选人的缩减

export default function profileReducer(state = initialState, action) {  
    switch(action.type) {

      case FETCH_POSTS_FAILURE:
      return Object.assign({}, state, {
        didInvalidate: true
      })

      case REQUEST_PROFILE:
      return Object.assign({}, state, {
        isFetching: true,
        didInvalidate: false
      })

      case RECEIVE_PROFILE:
      return {
        ...state, 
        candidate: action.data
      }

      default: 
        return state;
    }
  }

root reducer

const rootReducer =  combineReducers({
  profiles: profileReducer
})

export default rootReducer;

创建商店

const composeEnhanser = window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__||compose;
const loggerMiddleware = createLogger()


export default function configureStore() {  
  return createStore(
    rootReducer,
    composeEnhanser(applyMiddleware(thunkMiddleware,
      loggerMiddleware))
  );
}

index.js

const store = configureStore(); 

const app = (
  <Provider store= {store}>
    <BrowserRouter>
     <App/>
    </BrowserRouter>
    </Provider>
)


ReactDOM.render(app, document.getElementById('root'));
registerServiceWorker();

动作创建者/ api致电

export function feachProfiles() {
  return function (dispatch) {
    dispatch(requestProfile)
    return fetch(API_URL)
      .then(
        response => response.json(),
        error => console.log('An error occurred.', error)
      )
      .then(json =>
        dispatch(receiveProfile(json))
      )
  }
}

componentuse

class CandidatesList extends Component {

    constructor (props){
        super (props)
      }

    componentWillMount() {
            this.props.feachProfiles(); 

        }

    handleClick() {
      }

      componentWillUnmount() {
      }  

    render() {     
   const candidate = this.props.profiles.map(profile=>(
       <div> </div>
   )); 

        return (
            <div>
                 <ViewCandidate
                 />
            </div>
        );
    }
}


const mapStateToProps = state => {
    return {
      profiles: state.profiles.candidate || []
      }
    }
const mapDispatchToProps = (dispatch) => {
        return {
            feachProfiles: bindActionCreators(feachProfiles, dispatch)
        }
    }

  export default connect(mapStateToProps, mapDispatchToProps)(CandidatesList);  

action RECEIVE_PROFILE @ 
redux-logger.js:1  prev state {profiles: {…}}
redux-logger.js:1  action     {type: "RECEIVE_PROFILE", data: {…}}
redux-logger.js:1  next state {profiles: {…}}

Answer 1

确保在地图功能

之前写这个

if (this.props.profiles.length === 0) return null;

this.props.profiles的数组长度应大于0

  const candidate = this.props.profiles.map(profile=>(
           <div> </div>
       ));

组件中未定义的redux-react状态

1 个答案: