Состояние сбой обновления информации об изменениях json

Мне нужно обновить некоторую информацию в плагине. Что я делаю:

app.js:

import React, { Component } from 'react';
import CesiumGlobe from "./cesium/CesiumGlobe";

class App extends Component {
    constructor(props){
        super(props);
        this.state = {
        pin : [],
        };
    }

    componentDidMount() { 
            let fetchData = () => { 
            let url= "localhost:3001/pin" 
            fetch(url) 
                 .then(resp=>resp.json()) 
                 .then(data =>{ 
                                 this.setState((state)=>{ 
                                      return { pin:data } 
                                  }) 
                               }); 
                 } 
           fetchData() 
           this.update = setInterval(fetchData, 2000) 
          }

    render() {
        const containerStyle = {
            width: '100%',
            height: '100%',
            top: 0,
            left: 0,
            bottom: 0,
            right: 0,
            position: 'fixed',
        };

        let icons = [];

        this.state.pin.forEach(function(element) {
            icons.push(element);
        });

        return (
            <div style = {containerStyle}>
                <CesiumGlobe icons = {icons} />

                <div style = {{position : "fixed", top : 0}}>
                    <div style = {{color : "white", fontSize: 40, }}>
                        Text Over the Globe
                    </div>

                    <button style = {{fontSize : 40}} onClick = {this.handleFlyToClicked}>
                        Jump Camera Location
                    </button>
                </div>
            </div>
        );
    }
}

export default App;

index.js:

import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';
import './index.css';

import "cesium/Source/Widgets/widgets.css";

import buildModuleUrl from "cesium/Source/Core/buildModuleUrl";
buildModuleUrl.setBaseUrl('./cesium/');

function tick() {
ReactDOM.render(
  <App />,
  document.getElementById('root')
);
}

setInterval(tick, 1000);

Мое намерение состояло в том, чтобы загружать содержимое «pin.json» каждую секунду и передавать его в состояние, обновляя его каждую секунду.

В первый раз, когда я запускаю приложение, оно работает нормально, но если я вношу изменения в json, изменения полностью игнорируются ...

Я не могу понять, что делаю не так, кажется, я теряю слона в комнате, но все мои исследования мне ничего не дают.

Это кажется ужасным способом сделать это. Вместо повторного рендеринга вашего приложения просто повторно выполните рендеринг компонента, т. Е. Выполните обновление в компоненте.

Dave Newton 13.12.2018 17:34

Я думаю, что ваши изменения в pin.json никогда не будут автоматически переданы компоненту, вам придется получать содержимое файла каждый раз, когда вы хотите получить последнюю версию файла.

Kabbany 13.12.2018 17:35

я знаю, но даже если я сделаю это, что было моей первой попыткой, информация не будет обновлена ​​@kabbany, даже если я повторно визуализирую весь компонент?

alex monti 13.12.2018 17:36

Не могли бы вы предоставить больше кода о своей первой пробной версии?

Kabbany 13.12.2018 17:39

@Kabbany отредактировал в вопросе

alex monti 14.12.2018 10:01

Поэтому, если браузер на самом деле выполняет сетевые вызовы каждые 2 секунды, вы должны увидеть это на вкладке сети вашего браузера, пожалуйста, убедитесь, что запрос не кэшируется каким-либо браузером.

Kabbany 14.12.2018 10:37
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
6
66
0

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