Массив json из внешнего файла не настраивает состояние в ответ

Я учусь реагировать. И я пытаюсь setState на componentDidMount() функции с внешним файлом, содержащим Array of Data, но не настраивая состояние. Он показывает пустым каждый раз, когда я обновляю страницу.

app.js

import './App.css';
import React from 'react';
import newData from './data.js';


class App extends React.Component {
    constructor(props) {
        super(props)

        this.state = {
            data : []
        }
    }

    componentDidMount() {
        this.setState({data: newData});
        console.log(this.state.data)
    }

    
    render(){
    return (
        <div>Hello</div>
        )
    }

}

данные.js

const newData = [
    {
      "id": 1,
      "name": "GoodName",
    },
]


export default newData

Я также попытался изменить формат данных и обернуть их в Seed.function как

window.Seed = (function() {

    const newData = [
        {
            id: 1,
            name: 'GoodName',
        },
    ];
    return {newData: newData };
}());

И попытался setState по

this.setState({data: Seed.newData});

Но там написано Seed is not defined

  • Должен ли я импортировать внешний файл массива json в index.html вместо App.js ?

  • Должен ли я использовать цикл функции mapилиfor of для повторения каждого элемента в данных перед установкой состояния ?

Я пробовал много раз, но это все еще не работает.

Любая помощь приветствуется. Заранее спасибо.

Формы c голосовым вводом в React с помощью Speechly
Формы c голосовым вводом в React с помощью Speechly
Пытались ли вы когда-нибудь заполнить веб-форму в области электронной коммерции, которая требует много кликов и выбора? Вас попросят заполнить дату,...
В чем разница между Promise и Observable?
В чем разница между Promise и Observable?
Разберитесь в этом вопросе, и вы значительно повысите уровень своей компетенции.
Сравнение структур данных: Массивы и объекты в Javascript
Сравнение структур данных: Массивы и объекты в Javascript
Итак, вы изучили основы JavaScript и хотите перейти к изучению структур данных. Мотивация для изучения/понимания Структур данных может быть разной,...
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Создание собственной системы электронной коммерции на базе Keystone.js - настройка среды и базовые модели
Прошлая статья была первой из цикла статей о создании системы электронной коммерции с использованием Keystone.js, и она была посвящена главным образом...
Приложение для отслеживания бюджета на React js для начинающих
Приложение для отслеживания бюджета на React js для начинающих
Обучение на практике - это проверенная тема для достижения успеха в любой области. Если вы знаете контекст фразы "Практика делает человека...
Стоит ли использовать React в 2022 году?
Стоит ли использовать React в 2022 году?
В 2022 году мы все слышим о трендах фронтенда (React, Vue), но мы не знаем, почему мы должны использовать эти фреймворки, когда их использовать, а...
0
0
22
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

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

this.state.data не доступен сразу после звонка setState. Проверять: https://reactjs.org/docs/faq-state.html#why-doesnt-react-update-thisstate-синхронно

Попробуйте вставить console.log вместо render, чтобы увидеть содержимое массива.

Спасибо, это сработало, но когда я console.log(this.state.data), он показывает это four times, я не думаю, что он зацикливается четыре раза, потому что я не использую цикл и не использую карту, а также массив недостаточно длинный

MyPan 17.05.2022 11:37

Проверьте последний абзац: reactjs.org/docs/react-component.html#componentdidmount Обычно он должен запускать повторный рендеринг дважды, не знаю, почему вы видите журнал, отображаемый 4x.

agulowaty 17.05.2022 11:48

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