如何使用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;

如果我使用節點，那可以工作，但是有什么辦法可以做到這一點？

Answer 1

因為您提到單擊元素來觸發文件修改，所以我假設您的React程序在瀏覽器中運行。 盡管fs是Node運行時的一部分，但出於安全原因，除了某些專有擴展之外，在瀏覽器運行時中沒有這種事情。

解決方法是，React頁面可以將JSON文檔發送到服務器，服務器可以存儲該文件，或將其下載回客戶端計算機。

Answer 2

瀏覽器不允許您訪問文件系統，因此無法在應用程序的前端部分使用fs。