React-redux: почему в моем домашнем компоненте состояние не определено?

У меня проблемы с получением состояния в HomeComponent.js. Каждый раз, когда я пытаюсь его распечатать, он возвращает «undefined».

Я пробовал разные способы вызова onPress в своем домашнем компоненте (например, onPress={this.printState()}, но ничего не работает)

Это мой HomeComponent.js

//import statements

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

const mapDispatchToProps = dispatch => ({
    fetchJobTitles: () => dispatch(fetchJobTitles())
});

class Home extends Component {
    constructor(props) {
        super(props);
        this.state = { 
            jobInputValue: '',
            addressInputValue: ''
         };
      }


componentDidMount() {
    this.props.fetchJobTitles();
}

printState = () => {
    console.log('State is: ' + 
    JSON.stringify(this.state.jobTitles));
}

render() {
    return (

    <ImageBackground style={styles.bkgImage} source={require('../assets/homepage_background.jpg')}>

      //JSX goes here

        <Button 
            title="CAUTĂ"
            type="outline"
            underlayColor={colors.red}
            titleStyle={styles.buttonTitleStyle}
            color={colors.red}
            style={styles.buttonStyle}
            onPress={this.printState}
            />
    </ImageBackground>
    );
  }
}


//some styles

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

Это мой редуктор (jobTitles.js):

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

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

switch (action.type) {
    case ActionTypes.GET_JOB_TITLES:
        return {...state, errMess: null, jobTitles: action.payload};

    case ActionTypes.JOB_TITLES_FAILED:
        return {...state, errMess: action.payload};

    default:
      return state;
  }

};

А это мой создатель действий:

import * as ActionTypes from './ActionTypes';
import { baseUrl } from '../shared/baseUrl';

export const fetchJobTitles = () => (dispatch) => {

return fetch(baseUrl + 'api/jobs/job_keywords')
.then(response => {
    if (response.ok) {
      return response;
    } else {
      var error = new Error('Error ' + response.status + ': ' +     
response.statusText);
          error.response = response;
          throw error;
        }
      },
      error => {
            var errmess = new Error(error.message);
            throw errmess;
      })
    .then(response => response.json())
    .then(jobTitles => dispatch(addJobTitles(jobTitles)))
    .catch(error => dispatch(jobTitlesFailed(error.message)));
};

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

export const addJobTitles = (jobTitles) => ({
    type: ActionTypes.GET_JOB_TITLES,
    payload: jobTitles
});

Вот так выглядит ответ от API:

    "jobTitles": Object {
      "results": Array [
        "Engineer",
        "Software",
        "Software Architect",
        "Software Consultant",
        "Solution Architect",
        "System Architect"
      ]
  }

Я ожидал, что оператор console.log() из функции print() в HomeComponent.js распечатает ответ JSON от API, но вместо этого он возвращает «неопределенное». Есть идеи, почему?

Любая помощь будет принята с благодарностью!

3 метода стилизации элементов HTML
3 метода стилизации элементов HTML
Когда дело доходит до применения какого-либо стиля к нашему HTML, существует три подхода: встроенный, внутренний и внешний. Предпочтительным обычно...
Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Стилизация и валидация html-формы без использования JavaScript (только HTML/CSS)
Будучи разработчиком веб-приложений, легко впасть в заблуждение, считая, что приложение без JavaScript не имеет права на жизнь. Нам становится удобно...
Flatpickr: простой модуль календаря для вашего приложения на React
Flatpickr: простой модуль календаря для вашего приложения на React
Если вы ищете пакет для быстрой интеграции календаря с выбором даты в ваше приложения, то библиотека Flatpickr отлично справится с этой задачей....
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Что такое cURL в PHP? Встроенные функции и пример GET запроса
Клиент для URL-адресов, cURL, позволяет взаимодействовать с множеством различных серверов по множеству различных протоколов с синтаксисом URL.
0
0
32
2
Перейти к ответу Данный вопрос помечен как решенный

Ответы 2

Вы должны использовать this.props.jobTitles

mapStateToProps помещает данные из состояния редукции в свойства компонента. this.state содержит только локальное состояние компонента. Итак, jobInputValue и addressInputValue в данном случае. Все, начиная с mapStateToProps и mapDispatchToProps, попадет в props. (Как следует из названия функции)

Ответ принят как подходящий

В вашем коде:

this.state = { 
            jobInputValue: '',
            addressInputValue: ''
         };

Что вы пытаетесь напечатать:

this.state.jobTitles

Конечно, это не определено! Либо зарегистрируйте this.props.jobTitles, либо установите состояние jobTitles для печати того, что вы хотите.

Другие вопросы по теме