Почему React fetch возвращает пустой объект?

Question

У меня есть работающий Django REST API, который возвращает это:

{
    "id": 1,
    "brand": "peugeot",
    "model": "3008",
    "variant": "allure"
}

Я использую следующий код для извлечения вышеуказанных данных:

render() {
        const { brand, model, variant } = this.props;
        let url = `http://127.0.0.1:8000/api/car/${brand}/${model}/${variant}/`;
        console.log(url) <== url is correct when checked in console
        fetch(url)
            .then(response => response.json())
            .then(data => data.length === 0 ? this.setState({
                data : data
            }) : null ) <== I have used a condition for setState to stop fetching infintely

        const { data } = this.state;
        console.log(data) <== This is a blank object with no data in console
        console.log(data.id) <== This is undefined in console
        return (
            <div>
                {data.id} <== No data is shown on webpage
                Car Details
            </div>
        );
    }

Ошибка не отображается, когда япопробуйте получить данные на моей веб-странице.Что я делаю не так?

PS Данные могут быть получены с того же сервера API, когда у меня есть массив объектов, и я использую map для циклического перемещения по данным.Здесь я пытаюсь получить один элемент, чтобы не было массива, только объект.Что-то не так с синтаксисом?

Answer 1

Никогда не следует fetch или setState внутри функции render.

render вызывается много раз из-за всевозможных побочных эффектов, таких как прокрутка, щелчок, изменение реквизита и т. Д.Этот тип кода может вызвать все виды проблем.

Если вам нужно выполнить запрос один раз, вызовите функцию fetch внутри componentDidMount.Кроме того, я считаю, что ваши обратные вызовы должны выглядеть примерно так:

fetch(url)
  .then(response => response.json())
  .then(data => this.setState({ data : data }))

Взято из документов :

componentDidMount() вызывается сразу после компонентаустановлен.Инициализация, которая требует DOM-узлов, должна быть здесь.Если вам нужно загрузить данные из удаленной конечной точки, это хорошее место для создания экземпляра сетевого запроса.

Answer 2

Я изменил условие перед setState на JSON.stringify(data) !== JSON.stringify(this.state.data), и теперь оно работает.

Answer 3

должно быть:

.then(data => data.length > 0 ? this.setState({ data }) : null )