Получить данные из выпадающего списка для API динамического вызова
Поэтому я использую redux-хуки для управления состоянием, поэтому в моем приложении есть выпадающий список, значение будет использоваться для динамического вызова API, в создателе действий я сделал это так.
export const getFetchCasesSelectedCountry = (country) => (dispatch) => {
return (
axios.get(`https://covid19.mathdro.id/api/countries/${country}`).then((result) => {
let confirmed = result.data.confirmed.value;
let recovered = result.data.recovered.value;
let death = result.data.deaths.value;
dispatch({
type: GET_SELECTED_COUNTRY,
payload: {
countryConfirmed: confirmed,
countryRecovered: recovered,
countryDeath: death,
}
})
})
)
}
но я получил это ошибка
как получить значение из выпадающего списка, чтобы его можно было ввести в создателя действия? Является ли это возможным? извините, если мой вопрос трудно понять.
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 2
Ошибка HTTP 404, или чаще называемая «ошибкой 404», означает, что API, который вы пытаетесь использовать, не может быть найден на сервере. Это инцидент на стороне клиента, который означает, что либо конечная точка была удалена или перемещена, а URL-адрес не был соответствующим образом изменен, либо вы ввели URL-адрес с ошибкой.
Причины ошибки 404 могут быть разными:
это может быть проблема с сетью - я имею в виду, что запрошенный URL-адрес недоступен из вашей среды. Я вижу из кода, что вы делаете запрос GET, поэтому для тестирования сети вы можете просто открыть браузер с URL-адресом, который используется в действии. https://covid19.mathdro.id/api/countries/USA например.
Код, который вызывает getFetchCasesSelectedCountry, предоставляет какое-то странное значение страны, которое может привести к ошибке 404.
Тем не менее, код, который вы разместили, не обрабатывает ошибки, которые могут возникнуть из-за вызова axios (например, 404), поэтому ваш магазин не будет знать об ошибках, которые могут произойти, поэтому компонент, подключенный к магазину, также не будет знать о таких проблемах.
По моему опыту, обычный подход к таким вещам с редуксом состоит в том, чтобы ввести больше состояний, в которых будет храниться информация об ошибке:
// this is purely an example
// let say that you have such state
const state = {
loading: false,
hasError: false,
errorMessage: '',
data: null,
}
// reducer
function stateReducer(state, action) {
switch(action.type) {
case GET_SELECTED_COUNTRY_LOAD:
// set here 'loading' to true - started request execution
// return new state
case GET_SELECTED_COUNTRY_LOADED:
// set here 'loading' to false - got response
// set here data that came with action payload
// return new state
case GET_SELECTED_COUNTRY_FAILED:
// set here 'loading' to false - got error response or failed
// sethere 'errorMessage' that came with action payload
// return new state
}
}
// you'll have to create 2 new action creators to handle GET_SELECTED_COUNTRY_LOAD // and GET_SELECTED_COUNTRY_FAILED
// now your code should look like this
const getFetchCasesSelectedCountry = (country) => (dispatch) => {
return (
dispatch({ type: GET_SELECTED_COUNTRY_LOAD });
axios.get(`https://covid19.mathdro.id/api/countries/${country}`)
.then((result) => {
// do some stuff with result
dispatch({
type: GET_SELECTED_COUNTRY_LOADED,
payload: { /* useful data here */ }
});
).catch(err => {
dispatch({
type: GET_SELECTED_COUNTRY_FAILED,
payload: { /* useful error data here */ }
});
})
}
Поэтому всякий раз, когда возникает ошибка, компонент, подключенный к хранилищу, сможет ее обработать (по крайней мере, показать сообщение об ошибке, которое можно получить из хранилища).