Блог

Короткая история: я создаю свою собственную ГИС (географическую информационную систему) и хочу иметь возможность загружать файлы JSON с географическими данными. Однако я не хочу сохранять файлы в базе данных, просто в списке. Кроме того, я использую контекст для анализа данных в <MAP/> компоненте (листовке). Когда я загружаю новые JSON-файлы в layerList он обновляется, но <MAP/> компонент не выполняет повторный рендеринг.

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

Вот мой код

 import React, {createContext, useState} from 'react';
import "../../App.css";
import data from '../../Layers/layer1.json'
import data1 from '../../Layers/layer2.json'


export const FileContext = createContext()

const layerList = [data]


function updateList(layer){
    layerList.push(layer)
}


    // Create an object of formData 
const onFileChange = e => {
    const fileReader = new FileReader();
    fileReader.readAsText(e.target.files[0], "UTF-8");
    fileReader.onload = e => {
        updateList(JSON.parse(e.target.result));
        console.log(layerList)
    };
    //console.log(layerList)
    }

export const FileProvider = (props) => {

    const [layer, setLayer] = useState(
        layerList
    )


    return(
        <FileContext.Provider value = {layer}>
            {props.children}
        </FileContext.Provider>
    );
}

function FileUpload() {

  return (
    <div>
        <div id='fileupload'>
            <input type="file" onChange={onFileChange} />
        </div>
    </div>


  );
}

export default FileUpload;

  

Ваш layerList существует и поддерживается за пределами области действия вашего компонента. Он не знает об изменениях, вносимых в LayerList таким образом. Вам нужно немного изменить свою логику, чтобы она выглядела более похоже на это:

 import React, {createContext, useState} from 'react';
import "../../App.css";
import data from '../../Layers/layer1.json'
import data1 from '../../Layers/layer2.json'


export const FileContext = createContext()




    // Create an object of formData 
const onFileChange = e => {
    const fileReader = new FileReader();
    fileReader.readAsText(e.target.files[0], "UTF-8");
    fileReader.onload = e => {
        updateList(JSON.parse(e.target.result));
        console.log(layerList)
    };
    //console.log(layerList)
    }

export const FileProvider = (props) => {
    const [layerList, setLayerList] = useState([data]);
    const updateList (layer) => {
      setLayerList([layer, ...layerList]); //This creates a new array in memory, so it will trigger a rerender.
    };

    useEffect(() => {
      //Update json file logic
    }, [layerList])
    
   return(
        <FileContext.Provider value = {layerList, setLayerList}>
            {props.children}
        </FileContext.Provider>
    );
}

function FileUpload() {
  //change this component to be a context consumer and the 'onChange' event can fire the `setLayerList` function to update everything.
  return (
    <div>
        <div id='fileupload'>
            <input type="file" onChange={onFileChange} />
        </div>
    </div>


  );
}

export default FileUpload;