如何将从TextInput提取的数据保存到React Native中的本地json文件中？

问题描述

我创建了一个应用程序，该应用程序显示json文件中的数据。 我面临的问题是我有一个添加新数据按钮，逻辑是从用户那里获取数据，然后将其保存在同一json文件中。

请帮助我做同样的事情。

这是react native的代码

<View>
  <Text>User ID </Text><TextInput placeholder={" eg. 01"}/>
</View>
<View>
  <Text>Email-ID </Text><TextInput placeholder={" eg. [e-mail]"}/>
</View>
<View>
  <Text>Address </Text><TextInput placeholder={" eg. Raipur,Chhattisgarh"}/>
</View>

这是json文件的代码

{ 
    "users":[
        {
            "uid": 1,"name": "Amit Chauhan","email": "[e-mail]","address": "Pathankot"
        },{
            "uid": 2,"name": "Ajay Singh","address": "Dehradun"
        }
}

请帮助我。

解决方法

这可能会有所帮助（已更新

您可以使用[rn-fetch-blob] [1]访问文件路径并将其写入

Class App extends Component {

  constructor(props){
    super(props)

    this.state = {
      userData: {},name: '',email: '',address: '',}
  }

  saveDefaultUserDataFromJsonFileToState(){
    
    RNFetchBlob.fs.readFile("jsonFilePath...",'utf-8')
     .then((data) => {
        const userData = JSON.parse(data);
        this.setState({ userData });  
    });
  }

  componentDidMount(){
    this.saveDefaultUserDataFromJsonFileToState(); // Save Default User Data From Json File To State
  }

  async writeDataToJsonFile(path,content,encoding = "utf8") {
    return new Promise(function(resolve,reject) {
    RNFetchBlob.fs.writeFile(path,"",encoding).then(res => {
      RNFetchBlob.fs.writeStream(path,encoding).then(ofstream => {
        ofstream.write(content);
        ofstream.close();
        return resolve(true);
      });
    });
    });
  }

  async _handlePress() {
     const user = {};
     user.name = this.state.name;
     user.email = this.state.email;
     user.address = this.state.address;

     const userDatas = [... this.state.userData.users];
     userDatas.push(user);

     this.setState( { userData.users: userDatas });

     await writeDataToJsonFile("pathToJsonFile...",JSON.stringify(this.state.userData),"utf8"); // write Data To Json File 
  }

  render() {
    return (
      <View>

        <Text> Name </Text>

        <TextInput
          placeholder="Enter Name"
          onChangeText={(text) => this.setState({name:text})}
        />

        <Text> Email </Text>

        <TextInput
          placeholder="Enter Email"
          onChangeText={(text) => this.setState({email:text})}
        />

        <Text> Adress </Text>

        <TextInput
          placeholder="Enter Adress"
          onChangeText={(text) => this.setState({address:text})}
        />

        <Button  onPress={() => this._handlePress()}> 
        Submit
        </Button>

        </View>
    );
  }
}