React：如何通过对话框打开并读取本地JSON文件内容

你目前的代码只是捕获到了选中的文件对象，但还没完成读取文件内容、解析JSON、更新组件state这几个关键步骤，咱们来一步步修正：

首先，组件需要初始化state来存储读取到的JSON内容，然后借助浏览器原生的FileReader API来读取文件，解析后更新state。这里给你一份完整的可运行代码：

import React, { Component } from 'react';
import Files from 'react-files';

class LoadFile extends Component {
  // 初始化state，用来存放所有读取成功的JSON内容
  state = {
    jsonContents: []
  };

  handleFileChange = (files) => {
    // 遍历选中的每个文件（因为你设置了maxFiles=3，支持多选）
    files.forEach(file => {
      const reader = new FileReader();
      
      // 文件加载完成后的回调逻辑
      reader.onload = (e) => {
        try {
          // 把读取到的文本解析成JSON对象
          const jsonData = JSON.parse(e.target.result);
          // 更新state，保留之前的内容并添加新的JSON数据
          this.setState(prevState => ({
            jsonContents: [...prevState.jsonContents, jsonData]
          }));
          console.log('JSON文件读取成功:', jsonData);
        } catch (err) {
          console.error('JSON解析失败，请检查文件格式:', err);
        }
      };

      // 以文本格式读取文件内容
      reader.readAsText(file);
    });
  };

  render() {
    const { jsonContents } = this.state;
    return (
      <div className="files">
        <Files
          className="files-dropzone"
          onChange={this.handleFileChange}
          onError={err => console.log('文件操作出错:', err)}
          accepts={['.json']}
          multiple
          maxFiles={3}
          maxFileSize={10000000}
          minFileSize={0}
        >
          <p>拖拽JSON文件到这里，或者点击选择文件（最多3个）</p>
        </Files>

        {/* 展示读取到的JSON内容，用pre标签格式化显示 */}
        <div className="json-display">
          <h3>已读取的JSON内容:</h3>
          {jsonContents.map((content, index) => (
            <div key={index} className="json-item">
              <pre>{JSON.stringify(content, null, 2)}</pre>
            </div>
          ))}
        </div>
      </div>
    );
  }
}

export default LoadFile;

关键步骤说明： #

• 初始化state：用jsonContents数组来存储多个JSON文件的内容，适配你设置的多选功能
• FileReader读取文件：浏览器原生API，负责把本地文件转换成可读取的文本内容
• JSON解析与异常处理：用JSON.parse解析文本，同时用try/catch捕获解析失败的情况，避免组件崩溃
• 更新state：用函数式的setState来确保state更新的准确性，保留之前已读取的内容

额外注意事项： #

• 确保你已经正确安装了react-files库：执行npm install react-files或yarn add react-files
• 如果不需要多选，只需去掉multiple属性，把maxFiles设为1，代码里也可以不用遍历文件数组

内容的提问来源于stack exchange，提问作者Norfeldt