Javascript 从json文件| ReactJS加载的整个对象的设置状态

这个函数取自StackOverflow中的另一个问题，我在这里找到了关于从文件加载数据的问题，但我找不到它，因此无法给出积分

函数加载文件（）{
var输入，文件，fr；
if（typeof window.FileReader！=“函数”）{
警报（“此浏览器尚不支持文件API。”）；
返回；
}
输入=document.getElementById（'fileInput'）；
如果（！输入）{
警报（“嗯，找不到fileinput元素。”）；
}
如果（！input.files）{
警报（“此浏览器似乎不支持文件输入的`files`属性。”）；
}
如果（！input.files[0]），则为else{
警报（“请在单击“加载”之前选择一个文件”）；
}
否则{
file=input.files[0]；
fr=新文件读取器（）；
fr.onload=接收到的文本；
fr.readAsText（文件）；
}
函数receivedText（e）{
让线=e.target.result；
var newArr=JSON.parse（行）；
console.log（newArr.text_框）；
var newState={
集成时间：newArr.text\u box.integration\u time\u micro\u sec，
x_轴结果：newArr.text_box.x_轴结果，
y轴结果：newArr.text\u box.y轴结果，
像素之间的延迟\u毫秒：newArr.text\u box.delay\u像素之间的延迟\u毫秒，
结果目录：newArr.text\u box.results\u目录，
配置文件名称：“
}
console.log（newState）；
警报（newState.integration\u time）；
//这会弹出我要更新的正确数据
返回{newState}；
}
}
类应用程序扩展组件{
状态={
集成时间：configData.text\u box.integration\u time\u micro\u sec，//configData.integration\u time\u micro\u sec，
x_轴结果：configData.text_box.x_轴结果，
y轴结果：configData.text\u box.y轴结果，
像素之间的延迟\u毫秒：configData.text\u box.delay\u像素之间的延迟\u毫秒，
结果目录：configData.text\u box.results\u目录，
配置文件名称：“
//更改积分时间值的工作句柄示例
handleIntegrationTimeInput=e=>{
this.setState（{integration\u time:e.target.value}）；
};
handleLoadConfigFile=e=>{
loadFile（）；
警报（此.state.integration\u时间）；
//这会弹出旧数据，新状态未分配给该状态。。。
}; 
render（）{
返回(
//我的HTML页面作为JS
);
}
}
导出默认应用程序；

我是JS新手，可能不太了解状态/对象属性。 似乎我的newState可能是一个本地对象或类似的对象，我无法将其分配给

this.state

。 我已经读了很多关于

bind（）

，以及

这个

的含义，但是我感到非常困惑。

---

如何根据我的.json数据传递和更改

状态

？试试这个-我让

加载文件

返回一个承诺，这样你就可以很容易地从

接收文本

获取返回值，然后在JSX部分我们

等待获得新状态的承诺，然后调用
设置状态
wi返回的状态


函数加载文件（）{
返回新承诺（（解决、拒绝）=>{
var输入，文件，fr；
if（typeof window.FileReader！=“函数”）{
警报（“此浏览器尚不支持文件API。”）；
返回；
}
输入=document.getElementById（'fileInput'）；
如果（！输入）{
警报（“嗯，找不到fileinput元素。”）；
}如果（！input.files）{
警报（“此浏览器似乎不支持文件输入的`files`属性。”）；
}如果（！input.files[0]），则为else{
警报（“请在单击“加载”之前选择一个文件”）；
}否则{
file=input.files[0]；
fr=新文件读取器（）；
fr.onload=接收到的文本；
fr.readAsText（文件）；
}
函数receivedText（e）{
让线=e.target.result；
var newArr=JSON.parse（行）；
console.log（newArr.text_框）；
var newState={
集成时间：newArr.text\u box.integration\u time\u micro\u sec，
x_轴结果：newArr.text_box.x_轴结果，
y轴结果：newArr.text\u box.y轴结果，
像素之间的延迟\u毫秒：newArr.text\u box.delay\u像素之间的延迟\u毫秒，
结果目录：newArr.text\u box.results\u目录，
配置文件名称：“
}
console.log（newState）；
警报（newState.integration\u time）；
//这会弹出我要更新的正确数据
解决（新闻状态）；
}
});
}
类应用程序扩展组件{
状态={
集成时间：configData.text\u box.integration\u time\u micro\u sec，//configData.integration\u time\u micro\u sec，
x_轴结果：configData.text_box.x_轴结果，
y轴结果：configData.text\u box.y轴结果，
像素之间的延迟\u毫秒：configData.text\u box.delay\u像素之间的延迟\u毫秒，
结果目录：configData.text\u box.results\u目录，
配置文件名称：“
//更改积分时间值的工作句柄示例
handleIntegrationTimeInput=e=>{
这是我的国家({
整合时间：e.target.value
});
};
handleLoadConfigFile=async（e）=>{
const newState=wait loadFile（）；
this.setState（newState，（）=>{
警报（此.state.integration\u时间）；
 function loadFile() {
    var input, file, fr;

    if (typeof window.FileReader !== 'function') {
      alert("The file API isn't supported on this browser yet.");
      return;
    }

    input = document.getElementById('fileInput');
    if (!input) {
      alert("Um, couldn't find the fileinput element.");
    }
    
    else if (!input.files) {
      alert("This browser doesn't seem to support the `files` property of file inputs.");
    }
    else if (!input.files[0]) {
      alert("Please select a file before clicking 'Load'");
    }
    else {
      file = input.files[0];
      fr = new FileReader();
      fr.onload = receivedText;
      fr.readAsText(file);
    }

    function receivedText(e) {
      let lines = e.target.result;
      var newArr = JSON.parse(lines);
    
      console.log(newArr.text_box);
      var newState ={
            integration_time: newArr.text_box.integration_time_micro_sec, 
            x_axis_resulotion: newArr.text_box.x_axis_resulotion,
            y_axis_resulotion: newArr.text_box.y_axis_resulotion,
            delay_between_pixels_milisec: newArr.text_box.delay_between_pixels_milisec,
            results_directory: newArr.text_box.results_directory,
            config_file_name: ""
      }
      
      console.log(newState);
      alert(newState.integration_time);
      //This pops up the CORRECT data I want to update
      return {newState};
    }
  }
class App extends Component {
  state = {
    integration_time:configData.text_box.integration_time_micro_sec,//configData.integration_time_micro_sec,
    x_axis_resulotion: configData.text_box.x_axis_resulotion,
    y_axis_resulotion:configData.text_box.y_axis_resulotion,
    delay_between_pixels_milisec: configData.text_box.delay_between_pixels_milisec,
    results_directory: configData.text_box.results_directory,
    config_file_name: ""

    // Example for working handle for changing the value of integration_time
    handleIntegrationTimeInput = e => {
        this.setState({integration_time: e.target.value});
    };
    
    handleLoadConfigFile = e =>{
        loadFile();
        alert(this.state.integration_time); 
        //This pops up the OLD data, the new state wasn't assigned to the state...
    }; 
render(){
return(
//my HTML page as JS
            <input name="loadedConfigFile" id = 'fileInput' type="file"/>
            <input 
            name= "loadConfigButton"
            type= "button"
            id = "buttonLoad"
            value= "Load"
            onClick={this.handleLoadConfigFile}/> 

);
 }
}
export default App;