Tworzę aplikację, która ma dać mi poćwiczyć korzystanie z tras, więc początkowo używam statycznych, lokalnych danych testowych. Jest już w formacie json i jest obiektem składającym się z dwóch tablic (folderów i notatek). Chcę tylko, aby mój stan początkowy był tymi danymi. Oto, czego już próbowałem:

import React, { Component } from 'react';
import { Route, Link } from 'react-router-dom';
... other imports ...
import store from './dummy-store.js';


class App extends Component {
  state = {
    folder: [],
    notes: []
  };

  componentDidMount () {
    fetch(store)
      .then(res => res.json())
      .then(folder notes => this.setState({ folder notes })) 
  }

  render() {
....code...
}
}
0
EvanPoe 24 marzec 2020, 06:21

2 odpowiedzi

Najlepsza odpowiedź

Jeśli na przykład twój plik JSON to

{
  "folders": [ ... ],
  "notes": [ ... ],
  ...
}

Jeśli zaimportowano jako zasób lokalny w ramach (tj. W pakiecie) kodu aplikacji, uzyskaj dostęp w kodzie

import store from './dummy-store.js';

class App extends Component {
  state = {
    folder: store.folder,
    notes: store.notes,
  };
...

W przypadku pobrania jako zasób publiczny external (tj. W folderze publicznym, gdzieś w internecie itp.) Do Twojej aplikacji

class App extends Component {
  state = {
    folder: [],
    notes: []
  };

  componentDidMount () {
    fetch("pathToJsonFile")
      // return JSON object
      .then(res => res.json())
      // uses object destructuring of passed parameter
      .then(({folder, notes}) => this.setState({ folder, notes })) 
  }
...

Edit strange-nash-uxj6o

1
Drew Reese 24 marzec 2020, 04:22

Nie musisz pobierać, ponieważ już go zaimportowałeś, możesz przekazać jako stan początkowy do useState

const [state, setState] = useState(store);

Możesz sprawdzić tutaj https://codesandbox.io/s/silly-golick-rshco

1
iamhuynq 24 marzec 2020, 04:15