How do I modify a JSON file with React?

Question

I want to modify a JSON file in react. Is there any way to do so?

I have this code which is run when I click on an html element. At the end it calls VoteTracking which is the function where I actually modify my json file.

    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);
    }

This is my 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;

Which works if I used node, but is there any way for react to do this?

Answer 1

Since you mention that you click on an element to trigger file modification, I assume that your React program runs in a browser. While fs is part of the Node runtime, for security reasons there is no such thing in browser runtimes, except for some proprietary extensions .

As a workaround, the React page could send the JSON document to the server, which is able to store the file, or download it back to the client machine.

Answer 2

浏览器不允许您访问文件系统，因此无法在应用程序的前端部分使用fs。