如何将数据保存回原始 json 文件？答案

【问题标题】：How to save back data to original json file?如何将数据保存回原始 json 文件？
【发布时间】：2020-08-21 22:30:12
【问题描述】：

    state = {one_book : []}


updateName = event =>{
        var newvalue = event.target.value
        const id = 1;
        let one_book = this.state.one_book;     // create the copy of state array
        one_book[1] = newvalue;                  //new value
        this.setState({ one_book }); 
        console.log(this.state.one_book)
    }

这里的新值是我们要更改为json文件的更新值。我想用这个新名称更新 id =1 的书名，或者用 one_book 更新 json 文件中的整个对象。这些更改应该反映在原始 json 文件中

I have to update this state into json file with the respective id.
Here is my json file
[
    {
            "id": 1,
            "bookname": "Physics",
            "price": 600,
            "author": "ABC",
            "pages": 567,
            "category" : "School Books"
    },
    {
            "id": 2,
            "bookname": "Let Us C",
            "price": 1300,
            "author": "XYZ",
            "pages": 1267,
            "category" : "Technical"  
    }
]

【问题讨论】：

标签： json reactjs state form-data insert-update

【解决方案1】：

此let one_book = this.state.one_book; 不会创建数组的副本。 Javascript 数组和对象作为引用存储在变量中。

要复制数组而不发生意外突变，请使用解构：

let one_book = [...this.state.one_book];

但是，您似乎正试图通过使用数组索引来获取本书的id，就好像它是id。相反，您需要通过 id 找到正确的对象。

class Test extends React.Component {
 state = {one_book : [
    {
       "id": 1,
       "bookname": "Physics",
       "price": 600,
       "author": "ABC",
       "pages": 567,
       "category" : "School Books"
    },
    {
       "id": 2,
       "bookname": "Let Us C",
       "price": 1300,
       "author": "XYZ",
       "pages": 1267,
       "category" : "Technical"  
    }
]}


 updateName = event => {
   var newValue = event.target.value
   const id = 1;
   // Map over the array values
   let newBooks = this.state.one_book.map(book => {
      // If the id matches, update the book name
      if (book.id === id) {
       return {...book, bookname: newValue}
      }
      return book;
    })
  
    // Update the state with the new array
    this.setState({ one_book: newBooks }); 
  }
  
  render() {
    console.log(this.state.one_book)
    return <input onChange={this.updateName} />
  }
}

ReactDOM.render(<Test />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<div id="root"></div>

【讨论】：

嘿.. 谢谢。但我想再添加一件事.. 书籍数据在另一个 json 文件中。我想更新到那个
我已经更新了 this.state.books 数组中的值。到这里为止一切都很好。现在我希望整个 json 文件被这个数组替换。
我试过用这个.. const fs = require('fs'); saveBook = () =>{ 让数据 = JSON.stringify(this.state.books); fs.writeFileSync('./books-details.json', data); }

【解决方案2】：

您复制数组的逻辑不正确。

updateName = event =>{
        var newvalue = event.target.value
        const id = 1;

        let one_book = [...this.state.one_book];     // create the copy of state array
        one_book[1] = newvalue;                  //new value
        this.setState({ one_book }); 
        console.log(this.state.one_book)
    }

【讨论】：