Блог

У меня есть приложение React с некоторыми данными JSON. У меня есть выпадающее меню, чтобы установить статус для задания в моем приложении. У меня есть состояние с именем status с загруженными статусами с их идентификаторами следующим образом.

 this.state.status: [
  {id: 1, name: 'To-do'},
  {id: 2, name: 'In-progress'},
  {id: 3, name: 'Completed'},
]
  

При изменении статуса, выбрав пункт меню в выпадающем списке, мне нужно отправить идентификатор статуса в API. Итак, я устанавливаю значение выпадающего списка с выбранным статусом и нахожу идентификатор статуса по имени статуса в объекте status и получаю конкретный идентификатор. Вот что я пробовал до сих пор. Проблема в том, что вызов API не может перехватить идентификатор состояния. Консоль сообщает «status_id не определен»

 statusHandleChange = event => {
        const project_id = this.props.projectData.id;
        const job_id = this.props.projectData.currentJobId;

        this.setState({ currentStatus: event.target.value }, () =>
            Object.keys(this.state.status).forEach((key) => {
                if (this.state.status[key].name === event.target.value) {
                    const status_id = (this.state.status[key].id)
                }
            }),

            API.post('job/change_current_status', { project_id, job_id, status_id })
                .then(({ data }) => {
                    console.log("success!", data)
                })
                .catch((err) => {
                    console.log("AXIOS ERROR: ", err);
                })
        );

    };
  

ОШИБКА: ‘status_id’ не определен!

Поскольку вы определили status_id как константу в блочной области внутри оператора if внутри функции, она недоступна вне этого if оператора. Вместо этого вы можете использовать find and Object.values с деструктурированием (потому forEach что ничего не возвращает):

 const { id: status_id } = Object.values(this.state.status).find(({ name }) => name === event.target.value);