javascript - 如何使用 React 修改 JSON 文件？

Question

我想在react中修改一个JSON文件。有什么办法可以做到吗？

我有这个代码，当我单击 html 元素时就会运行。最后它调用 VoteTracking，这是我实际修改 json 文件的函数。

    handleChange(val){
            const { voted, score, imgup, imgdown, deviceKey } = this.state;
            const { id } = this.props;
            var x = this.state.score, vote = val;

            var clr;
            if (val) clr="#d98832"; else clr = "#3d3dff";

            if(!voted) {
                x += val;
                this.setState({voted: val, score: x, color: clr });
            }
            else if(Math.abs(voted)){
                if (voted == val){
                    vote = 0;
                    x -= val;
                    this.setState({voted: 0, score: x, color: "#6e6e6e"});
                }
                else {
                    x += (2* val);
                    this.setState({score: x, voted: val, color: clr});
                }
            }

            VoteTracking(this.props.id, deviceKey, vote);
    }

这是我的 VoteTracking.js

const VoteTracking = function(ident, deviceKey, vote){
  var fs = require('fs');
  var m = JSON.parse(fs.readFileSync('VoteList.json').toString());

  var containsID = false;
  var found = false;

  m.forEach(function(p){
    if ( p.id == ident ) {
        containsID = true;

        for(var i in p.upvotes){
            var temp = p.upvotes[i];
            if ( temp == deviceKey){
                p.upvotes.splice(i, 1);
                console.log(i)
                found = true;
                break;
            }
        }
        if (!found){
            for(var i in p.downvotes){
                var temp = p.downvotes[i];
                if ( temp == deviceKey){
                    p.downvotes.splice(i, 1);
                    break;
                }
            }
        }

        switch (vote) {
            case 1: {
                p.upvotes.push(deviceKey);
                break;
            }
            case -1: {
                p.downvotes.push(deviceKey);
                break;
            }
        }

    }
  });

  if (!containsID){
    if (vote){
        m.push(
                {
                    id: ident,
                    upvotes: [deviceKey],
                    downvotes: []
                }
        );
    }
    else if (vote == -1 ){
        m.push(
                {
                    id: ident,
                    upvotes: [],
                    downvotes: [deviceKey]
                }
        );
    }
  }

  fs.writeFile('VoteList.json', JSON.stringify(m, null, "\t"));
};

module.exports = VoteTracking;

如果我使用 Node，这可以工作，但是有什么方法可以让 React 做到这一点吗？

Answer 1

既然你提到你点击一个元素来触发文件修改，我假设你的React程序在浏览器中运行。虽然 fs 是 Node 运行时的一部分，但出于安全原因，浏览器运行时中没有这样的东西，除了一些专有的 extensions .

作为解决方法，React 页面可以将 JSON 文档发送到服务器，该服务器能够存储该文件，或将其下载回客户端计算机。