具有多个输入的 Expo 中的 AsyncStorage 覆盖值

问题描述

我为 Android 应用程序编写了一个带有多个输入的 flatList，一个输入（别名）应该在列表中可见，其余是 onClick 事件的参数。无论如何，这工作正常，直到我关闭并重新打开应用程序。 然后所有值都被 convertToStringWithSeparators 中的最后一个值覆盖。 （在本例中为 task.pass）

有人知道我做错了什么吗？

    export default class myApp extends Component {


  state = {
    tasks: [ ],text: "",alias:"",user:"",pass:"",show: true,}

 
  toggle = () => this.setState(currentState => ({
    show: !currentState.show
  }));

  changeTextHandler = text => {
    this.setState({ text: text });
  };
  changeAliasHandler = alias => {
    this.setState({ alias: alias });
  };
  changeUserHandler = user => {
    this.setState({ user: user });
  };
  changePassHandler = pass => {
    this.setState({ pass: pass });
  };

  addTask = () => {
    let notEmpty = this.state.text.trim().length > 0;

    if (notEmpty) {
      this.setState(
        prevstate => {
          let { tasks,text,alias,user,pass } = prevstate;
          return {
            tasks: tasks.concat({ key: tasks.length,alias: alias,text: text,user: user,pass: pass }),alias: "",user: "",pass: ""
          };
        },() => Tasks.save(this.state.tasks)
      );
    }
  };


  deleteTask = i => {
    this.setState(
      prevstate => {
        let tasks = prevstate.tasks.slice();

        tasks.splice(i,1);

        return { tasks: tasks };
      },() => Tasks.save(this.state.tasks)
    );
  };

  componentDidMount() {
    Keyboard.addListener(
      isAndroid ? "keyboardDidShow" : "keyboardWillShow",e => this.setState({ viewMargin: e.endCoordinates.height + viewPadding })
    );

    Keyboard.addListener(
      isAndroid ? "keyboardDidHide" : "keyboardWillHide",() => this.setState({ viewMargin: viewPadding })
    );

    Tasks.all(tasks => this.setState({ tasks: tasks || [] }));
  }

  componentwillUnmount() {
    // fix Warning: Can't perform a React state update on an unmounted component
    this.setState = (state,callback)=>{
        return;
    };
}

  render() {
    return (
      <View
        style={[styles.container,{ paddingBottom: this.state.viewMargin }]}
      >
         <Text style={styles.appTitle}>My Nodes:</Text>
        <FlatList
          style={styles.list}
          data={this.state.tasks}
          keyExtractor={(item,index) => item.toString()}
          renderItem={ ( {item,index} ) => (
            <View>
              <View style={styles.listItemCont}>

                <Text style={styles.listItem} onPress={() => {Webbrowser.openbrowserAsync(`https://${item.user}:${item.pass}@${item.text}`)}}>
                  {item.alias},https://{item.user}:{item.pass}@{item.text}
                </Text>
               
                <Button color= "#ffff" title="&#10006;" onPress={() => this.deleteTask(index)} />
              </View>
              <View style={styles.hr} />
            </View>
          )}
        />
         
          <Button onClick={this.toggle} title=" ^ "/>
        {this.state.show && 
        <View style={styles.inputBox}>
        
          <Text style={{color:"white",marginLeft: 5}}>Add Node:</Text> 
         <TextInput
          style={styles.textInput}
          onChangeText={this.changeAliasHandler}
          onSubmitEditing={this.addTask}
          value={this.state.alias}
          placeholder="Alias"
          returnKeyType="done"
          returnKeyLabel="done"
        />
        <TextInput
          style={styles.textInput}
          onChangeText={this.changeTextHandler}
          onSubmitEditing={this.addTask}
          value={this.state.text}
          placeholder="Domain"
          returnKeyType="done"
          returnKeyLabel="done"
        />
        <TextInput
          style={styles.textInput}
          onChangeText={this.changeUserHandler}
          onSubmitEditing={this.addTask}
          value={this.state.user}
          placeholder="Dashboard-user"
          returnKeyType="done"
          returnKeyLabel="done"
        />
        <TextInput
          style={styles.textInput}
          onChangeText={this.changePassHandler}
          onSubmitEditing={this.addTask}
          value={this.state.pass}
          placeholder="Dashboard-password"
          returnKeyType="done"
          returnKeyLabel="done"
        />
        </View>
      }
      </View>
          
    )
  }
}

这是相关部分：

let Tasks = {
  convertToArrayOfObject(tasks,callback) {
    return callback(
      tasks ? tasks.split("||").map((task,i) => ({ key: i,text: task,user: task,pass: task,alias: task,url: task })) : []
    );
  },convertToStringWithSeparators(tasks) {
    return tasks.map(task => (task.alias,task.text,task.user,task.pass)).join("||")
  },all(callback) {
    return AsyncStorage.getItem("TASKS",(err,tasks) =>
      this.convertToArrayOfObject(tasks,callback)
    );
  },save(tasks) {
    AsyncStorage.setItem("TASKS",this.convertToStringWithSeparators(tasks));
  }
};

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）