Javascript 我的应用程序不想重新渲染，但是上下文中的列表会重新渲染

短篇故事：我正在制作自己的GIS（地理信息系统），希望能够上传带有地理数据的JSON文件。但是，我不想将文件保存在数据库中，只想保存在列表中。此外，我使用上下文将数据发送到（传单）组件。当我上传新的JSON到layerList时，它会得到更新，但组件不会重新呈现。上传文件后，我已经在控制台上记录了列表，并且添加了所有文件

上下文的使用基于youtube上DevEd的上下文指南

这是我的密码

背景：

import React, {createContext, useState, useEffect} from 'react';
import "../../App.css";


export const FileContext = createContext()

export const FileProvider = (props) => {

    const [layerList, setLayerList] = useState('');

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

import React，{createContext，useState，useffect}来自'React'；
导入“../../App.css”；
export const FileContext=createContext（）
导出常量文件提供程序=（道具）=>{
const[layerList，setLayerList]=useState（“”）；
返回(
{props.children}
);
}

上载组件：

import React, {createContext, useContext, useState} from 'react';
import "../../App.css";
import {FileContext} from './FileContext'


function FileUpload() {

    const  [layerList, setLayerList]  = useContext(FileContext)

    const onFileChange = e => {
        const fileReader = new FileReader();
        fileReader.readAsText(e.target.files[0], "UTF-8");
        fileReader.onload = e => {
            setLayerList(prevLayer => [...prevLayer, JSON.parse(e.target.result)]);
        };
        }

    return (
      <div>
          <div id='fileupload'>
                <input type="file" onChange={onFileChange} />
          </div>
      </div>
    );
  }
  
  export default FileUpload;

import React，{createContext，useContext，useState}来自'React'；
导入“../../App.css”；
从“./FileContext”导入{FileContext}
函数FileUpload（）{
const[layerList，setLayerList]=useContext（FileContext）
常数onFileChange=e=>{
const fileReader=new fileReader（）；
fileReader.readAsText（e.target.files[0]，“UTF-8”）；
fileReader.onload=e=>{
setLayerList（prevLayer=>[…prevLayer，JSON.parse（e.target.result）]；
};
}
返回(
);
}
导出默认文件上传；

地图：

import React，{useContext}来自“React”；
从“react传单”导入{Map，TileLayer，GeoJSON}
导入“./App.css”；
从“../LandingPage/ToolbarComponents/FileContext”导入{FileContext}；
从“../Layers/layer1.json”导入数据
从“../Layers/layer2.json”导入数据1
函数MapOslo（）{
const[layerList]=useContext（FileContext）
返回(
);
}
导出默认MapOslo；

编辑：我撤销了你的回购协议，我想现在已经解决了。注意map.js组件如何记录更新的.json文件中的数据。您的map.js组件应该如下所示：

import React, { useContext, useEffect, useState} from 'react';
import { Map, TileLayer, GeoJSON} from 'react-leaflet'
import "../App.css";
import { FileContext } from ../LandingPage/ToolbarComponents/FileContext';
import data from '../Layers/layer1.json'
import data1 from '../Layers/layer2.json'

function MapOslo() {

const [layerList] = useContext(FileContext);

const [layerState, setLayerState] = useState(layerList);

  useEffect(() => {
    setLayerState(layerList);
    console.log(layerState);
  });

  return (
      <Map center={[59.93, 10.75]} zoom={1}>
          <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          />
          <GeoJSON data={layerState} style={['color','#006400']} />
      </Map>
  );
}

export default MapOslo;

import React，{useContext，useffect，useState}来自'React'；
从“react传单”导入{Map，TileLayer，GeoJSON}
导入“./App.css”；
从../LandingPage/ToolbarComponents/FileContext'导入{FileContext}；
从“../Layers/layer1.json”导入数据
从“../Layers/layer2.json”导入数据1
函数MapOslo（）{
const[layerList]=useContext（FileContext）；
常量[layerState，setLayerState]=使用状态（layerList）；
useffect（（）=>{
设置图层状态（图层列表）；
console.log（layerState）；
});
返回(
);
}
导出默认MapOslo；

编辑2：我不知道你说的图层是什么意思。。。但它现在显示的是你先前包含在其中的静态位置的标记。请参见以下更新的map.js：

import React, { useContext, useEffect, useState} from 'react';
import { Map, TileLayer, GeoJSON, Marker, Popup} from 'react-leaflet'
import "../App.css";
import { FileContext } from '../LandingPage/ToolbarComponents/FileContext';
import data from '../Layers/layer1.json'
import data1 from '../Layers/layer2.json'



function MapOslo() {

  const [layerList] = useContext(FileContext);

  const [layerState, setLayerState] = useState(layerList);

  useEffect(() => {
    setLayerState(layerList);
    console.log(layerState);
  });

  const position = [59.93, 10.75];

  return (
      <Map center={position} zoom={6}>
          <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          />
          <GeoJSON data={layerState} style={['color','#006400']} />
          <Marker position={position}>
            <Popup>A pretty CSS3 popup.<br />Easily customizable.</Popup>
          </Marker>
      </Map>
  );
}

export default MapOslo;

import React，{useContext，useffect，useState}来自'React'；
从“react传单”导入{Map、TileLayer、GeoJSON、Marker、Popup}
导入“./App.css”；
从“../LandingPage/ToolbarComponents/FileContext”导入{FileContext}；
从“../Layers/layer1.json”导入数据
从“../Layers/layer2.json”导入数据1
函数MapOslo（）{
const[layerList]=useContext（FileContext）；
常量[layerState，setLayerState]=使用状态（layerList）；
useffect（（）=>{
设置图层状态（图层列表）；
console.log（layerState）；
});
常数位置=[59.93,10.75]；
返回(
一个漂亮的CSS3弹出窗口。
可轻松定制。
);
}
导出默认MapOslo；

好的，我来看看。我很确定，如果组件没有重新渲染，它将与useEffect挂钩相关。只需使用经过调整的map.js组件编辑第一个答案。不用担心！这也帮助我提高了我的反应能力。刚刚又更新了答案！我想，我现在就让你去弄清楚如何通过从上传的文件中获取位置来使位置动态化？如果这对你有帮助，请投票。好的，我知道了。然后，您应该创建类似于标记的组件，并从对象的layerState数组中传递所需的特性。不确定leafleft是否提供了这些元素，或者您必须从头开始创建它们。现在，您已经获得了有关该州的更新数据，以实现这一目标。祝你好运此线程可能会帮助您：

import React, { useContext, useEffect, useState} from 'react';
import { Map, TileLayer, GeoJSON, Marker, Popup} from 'react-leaflet'
import "../App.css";
import { FileContext } from '../LandingPage/ToolbarComponents/FileContext';
import data from '../Layers/layer1.json'
import data1 from '../Layers/layer2.json'



function MapOslo() {

  const [layerList] = useContext(FileContext);

  const [layerState, setLayerState] = useState(layerList);

  useEffect(() => {
    setLayerState(layerList);
    console.log(layerState);
  });

  const position = [59.93, 10.75];

  return (
      <Map center={position} zoom={6}>
          <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
          />
          <GeoJSON data={layerState} style={['color','#006400']} />
          <Marker position={position}>
            <Popup>A pretty CSS3 popup.<br />Easily customizable.</Popup>
          </Marker>
      </Map>
  );
}

export default MapOslo;