ReactJS: не выполняет обещание при вызове fetch ()

Question

У меня проблема с данными, которые я получаю. Я получил невыполненное обещание с моим вызовом. Это означает, что я также не знаю, является ли мой код возможным кодом или хорошим кодом.

У меня есть панель фильтров, где пользователь выбирает две даты, это означает, что я помещаю эти поля ввода в форму, опять же, не уверенный, должен ли я это делать, но теперь у меня есть onSubmit в моей форме. Это onSubmit берет мою функцию handleSubmit, которая вызывает мою выборку.

import React, { Component } from 'react';
import { SplitButton, Dropdown, Container } from 'react-bootstrap';
import CarCard from '../components/results/CarCard'

//YYYY-MM-DD

class SearchBar extends Component {
    state = {
        fromDate: '',
        toDate: '',
        data: [],
    }

    handleSubmit = event => {
        event.preventDefault();
        this.getData()
    }

    handleChange = event => {
        const target = event.target;
        const value = target.value;
        const name = target.name;
        this.setState({ [name]: value });
    }

    getData = () => {
        const { toDate, fromDate } = this.state
        var url = 'https://www.fenonline.dk/SYS_Backend/api/car/'
        url += fromDate + "/"
        url += toDate
        const data_promise = fetch(url).then(handleHttpErrors)
        data_promise.then(data => this.setState({ data }))
    }

    render() {
        return (
            <Container>
                <Container style={styles.container} fluid={true} >
                    <form onSubmit={this.handleSubmit}>
                        <h5 style={{ color: 'white', }}>Search for your rental here:</h5>
                        <input type="date" label="test" name='fromDate' onChange={this.handleChange} />
                        <input type="date" placeholder={this.state.toDate} name='toDate' onChange={this.handleChange} />
                        <input type='submit' value='search' />
                    </form>
                </Container>
                <Container>
                    {carCardItems(this.state.data) || 'Please wait...'}
                </Container>
            </Container>
        );
    }
}


export default SearchBar;

const carCardItems = data => {
    const items = data.map(c =>
        <CarCard key={c.regno} {...c} />
    );
    return items;
};

function handleHttpErrors(res) {
    if (!res.ok) {
        return Promise.reject({ status: res.status, fullError: res.json() })
    }
    return res.json();
}

Answer 1

Возможно, вы могли бы переписать getData(), используя async/await, чтобы лучше захватить все возможные пути кода для необнаруженных ошибок / обещаний:

/* Define async function */
getData = async () => {

    /* This try block will encapsulate the fetch logic, and capture all errors
       that can be thrown */
    try {

        const { toDate, fromDate } = this.state
        var url = 'https://www.fenonline.dk/SYS_Backend/api/car/'
        url += fromDate + "/"
        url += toDate

        /* Use await instead of promise.then */
        const response = await fetch(url)

        /* The json() function is async, so use await */
        const json = await response.json()

        /* If response failed, return error data in same format as in your 
           Promise.reject() */
        if(!response.ok) {
            throw { status: response.status, fullError: json } 
        }

        /* Update data with json */
        this.setState({ data : json })
    }
    catch(error) {

        /* Log error to console */
        console.error(error)
    }
}

Также обратите внимание, что response.json() - это асинхронный метод , что означает, что вам нужно будет позвонить через await, как показано выше (или как обещание; res.json().then(...)).Это означает, что выполнение:

return Promise.reject({ status: res.status, fullError: res.json() })

, как показано в вашем коде, будет означать, что значение fullError является Promise объектом, а не ожидаемыми данными JSON

Answer 2

Uncaught in обещание означает, что где-то появляется исключение, которое не обрабатывается (нет блока catch).

в этом случае внутри getData, fetch нужен блок catch. см. ниже

const data_promise = fetch(url).then(handleHttpErrors).catch(error => {console.error(error);})