स्थानीय जेसन

Question

पर नया राज्य कैसे सहेजें मेरे पास एक स्थानीय JSON फ़ाइल है जिसका उपयोग सभी डेटा को ऐप में लोड करने के लिए किया जाता है। एक घटक में मैं constructor() उन डेटा में लोड करता हूं। फ़ंक्शन addRow() में मैं नया फ़ील्ड जोड़ता हूं लेकिन यह केवल स्थानीय स्टेट वैरिएबल में है। मैं इसे जेसन फ़ाइल में भी जोड़ना चाहता हूं, इसलिए रीफ्रेश करने के बाद यह नई पंक्ति अभी भी यहां होगी।

मैं यह कोशिश कर रहा था कि यह वास्तव में कैसे हल हुआ लेकिन मुझे यह नहीं मिला। यदि आप किसी विषय के बारे में जानते हैं तो मुझे यह भेजें।

constructor() { 
    super(); 
    this.state = { 
     employees: require('json!../../../data/employees.json') 
    }; 
    this.addEmployee = this.addEmployee.bind(this); 
} 

addEmployee(employee) { 
    this.setState({ 
     employees: this.state.employees.concat([employee]) 
    }); 
} 

Answer 1

सुरक्षा कारणों से आप ब्राउज़र से फ़ाइल सिस्टम तक नहीं पहुंच सकते हैं। यदि आप रीफ्रेशिंग के बाद बस इसे एक्सेस करना चाहते हैं, तो मुझे लगता है कि जब आप राज्य को संशोधित करते हैं तो आप इसे स्थानीय स्टोरेज में सहेज सकते हैं और फिर घटक को लोड करते समय इसका उपयोग करते हैं, यदि यह अनिर्धारित नहीं है (आप इसे घटकडिडमाउंट में देख सकते हैं)। (नीचे दिए गए कोड का परीक्षण नहीं किया गया है)

addEmployee(employee) { 
    let newEmployees = this.state.employees.concat([employee]) 
    localStorage.setItem('employees', JSON.stringify(newEmployees)); 
    this.setState({ 
     employees: newEmployees 
    }); 
} 


componentDidMount(){ 
    let newEmployees = localStorage.employees 
    if(newEmployees != undefined){ 
     this.setState({ 
      employees: JSON.parse(newEmployees) 
     }); 
    } 
} 

आपको लगता है कि JSON लगातार संग्रहीत करना चाहते हैं और आप ताज़ा करने के बाद इसका इस्तेमाल करने में सक्षम होने की तुलना में अधिक चाहते हैं, तो आप इसे बैकएंड पर क्या करना चाहिए। आप उपयोगकर्ता को मैन्युअल रूप से फ़ाइल को डाउनलोड करने की अनुमति दे सकते हैं (डाउनलोड प्रॉम्प्ट के साथ) क्योंकि यह here वर्णित है।

Answer 2

क्लाइंट/ब्राउज़र से ऐसा करने का कोई तरीका नहीं है, क्योंकि उनके पास फ़ाइल सिस्टम (फॉर्म सुरक्षा विचारों) तक पहुंच नहीं है। आप इसे बैकएंड पर करना होगा।