Question

我有一个屏幕，上面有我从API提取的作业。在我的屏幕上，我想显示一条消息，直到提取作业，然后在屏幕上显示它们。我在componentDidMount（）中触发作业获取，然后尝试在RenderJobs（）中显示它们。问题在于props.isLoading无论出于何种原因都未定义。

此刻，我正在使用API调用的硬编码值。一旦数据能够正确显示，我将对其进行更改。

这是我的JobsComponent：

import React, {Component} from 'react';
import {connect} from 'react-redux';
import {fetchJobs} from '../redux/ActionCreators';

const mapStateToProps = state => {
    return {
        jobs: state.jobs
    }
}

const mapDispatchToProps = dispatch => ({
    fetchJobs: (address, jobTitle) => dispatch(fetchJobs(address,     jobTitle))
});

function RenderJobs(props) {
    console.log('In RenderJobs, props is: ' + props.jobsData + ' / '     + props.isLoading);

const renderJobItem = ({item, index}) => {
    return (
        //UI view to show data
    );
}

if (props.isLoading) {
    return (
        <View>
            <Text style={{fontSize: 30, color: colors.white}}>The     data is loading...</Text>
        </View>
    );
}
else if (props.errMess) {
    return(
        <View>
            <Text style={{fontSize: 30, color: colors.white}}>{props.errMess} </Text>
        </View>
    );
}
else {
    return (
        //UI view to show data
    );
}

}

class Jobs extends Component {
    componentDidMount() {
        this.props.fetchJobs([26.1410638, 44.4346588], "Developer");
    }
render() {
        return(
            <ScrollView contentContainerStyle={styles.bkg}>

                <RenderJobs 
                    jobsData={this.props.jobs}
                    isLoading={this.props.jobs.isLoading}
                    errMess={this.props.jobs.errMess} 
                    />
            </ScrollView>
        )
    }
}

这是我的减速器

import * as ActionTypes from '../ActionTypes';

export const jobs = (state = {   isLoading: true,
                             errMess: null,
                             jobs:[]}, action) => {

switch (action.type) {
    case ActionTypes.GET_JOBS:
        return {...state, isLoading: false, errMess: null, jobs:     action.payload};

    case ActionTypes.JOBS_LOADING:
        return {...state, isLoading: true, errMess: null, jobs: []}

    case ActionTypes.JOBS_FAILED:
        return {...state, isLoading: false, errMess: action.payload};

    default:
      return state;
  }
};

这是动作创建者：

export const fetchJobs = (address, job) => async (dispatch) => {
  dispatch(jobsLoading());
  var obj = {"origin": [26.1410638, 44.4346588], "job_details": ["Developer"]};
  //fetch the data
    .then(response => response.json())
    .then(jobs => dispatch(addJobs(jobs)))
    .catch(error => dispatch(jobsFailed(error.message)));
};


export const addJobs = (jobs) => ({
  type: ActionTypes.GET_JOBS,
  payload: jobs
});

export const jobsLoading = () => ({
  type: ActionTypes.JOBS_LOADING
});

export const jobsFailed = (errmess) => ({
  type: ActionTypes.JOBS_FAILED,
  payload: errmess
    });

我希望发生两件事。

在RenderJobs（）函数中，我依靠props.isLoading来提供加载状态。但是，它是未定义的。我在日志中可以看到已调度JOBS_LOADING操作，并且正确提取了作业数据。
一旦获取了作业数据，我希望它会显示在UI中。但是，事实并非如此-我只是看到一个空白屏幕。

任何帮助将不胜感激！

Answer 1

您好像忘记了在isLoading中添加mapStateToProps。

Answer 2

s3:\/\/(?<bucket>[^\/]*)\/(?<key>.*)将在首次渲染时未定义，因为您尚未定义任何默认值。您可以使用默认道具提供默认值。

isLoading

Answer 3

我发现了问题所在。在我的configureStore.js中，我忘记了将Job Reducer添加到商店中。感谢大家的回答！

$('input#addStatButton').click( function() {
  var formdata = $('form#new_stat').serialize(); // ***
  clearStat();                                   // ***
  $.ajax({
    type: 'POST',
    url: '{{action("StatController@store")}}',
    data: formdata,                              // ***
  })
  .done(function(refresh) {
    $.get('{{action("StatController@show", [$game->id])}}', function(data) {
      var newData = $("#statList" , data)
      $( "#statList" ).html( newData );
      //console.log(newData);
    });
  });
});

从商店中加载参数未定义

3 个答案: