javascript - Asyncstorage 恢复错误房间的状态

问题描述

我是编码新手。目前正在尝试在 react-native + firebase 中制作移动应用程序。

我被困在一些非常简单（我认为）的阶段，但现在花了几天时间但找不到答案。

在我的应用中，用户可以创建或进入房间。创建后，房间会在 firebase 中生成特定文件夹。

创建和进入房间工作正常。

但是当用户进入一个新房间时，他会观察前一个房间的状态，即使它假设是空白的，因为这是他的第一次进入。

我不明白如何解决这个问题，现在绝对哭了。一个

任何帮助表示赞赏。

这是保存状态的代码的一部分：

class  ChatRoom extends React.Component {
  constructor(zaza) {
    
    super(zaza);
    this.state = {
      allTasksComplete: false,
      task1: false,
      task2: false,
      task3: false,
      task4: false,
      task5: false,
      task6: false,
      task7: false,
      finishedTasks: null,
      zozo: false,
      newRoomName: '',
      creator: '',
    };
    

  }

  
  generateTask =  async (taskIndex, taskName,) => {

    const creatorCheck = await AsyncStorage.getItem('nickname')
    this.setState({creator: creatorCheck})
    
  const nicknameSnap = await collectionRef.where('roomName', '==', this.state.newRoomName).get()
   const nickCheck = nicknameSnap.docs[0].data()
   
   
    if(nickCheck.creator === this.state.creator) {

    firestore()
      .collection('Rooms')
      .doc(this.state.newRoomName)
      .collection('Alpha')
      .doc(taskIndex)
      .set({
        taskText: taskName,
        
      })
      .then(() => {
        console.log('Task added')
      })
    }
  else {
    firestore()
      .collection('Rooms')
      .doc(this.state.newRoomName)
      .collection('Beta')
      .doc(taskIndex)
      .set({
        taskText: taskName,
        
      })
      .then(() => {
        console.log('Task added')
      })
  } }


  async componentDidMount() {
    try {
    
    const trytextx = await AsyncStorage.getItem('currentRoom')
    const trial = JSON.parse(trytextx)

    const maybe1 = await AsyncStorage.getItem('task1')
    const string1 = JSON.parse(maybe1)

    const maybe2 = await AsyncStorage.getItem('task2')
    const string2 = JSON.parse(maybe2)

      this.setState({newRoomName: trial})

      if (string1 === false) {
      this.setState({task1: false})
    } else {
    this.setState({ task1: string1 }) 
    }

    if (string2 === false) {
      this.setState({task2: false})
    } else {
    this.setState({ task2: string2 }) 
    }
  } catch (e) {
    console.log(e)
  }
      

    
    
    db.collection('Rooms')
      .doc('RRN')
      .collection('Alpha')
      .get()
      .then(snapshot => {
        const tasks = []
        snapshot.forEach(doc => {
          const data = doc.data()
          tasks.push(data)
        })
        this.setState({
          finishedTasks: tasks
        })

      })
  }



  taskOne() {
    if (this.state.task1) {
      return (
        <View>
          <TaskOne />
          <TouchableOpacity onPress={() => {
            this.generateTask('Task1', 'First Task');
            this.buttonTaskTwo()
          }} raised='true' >
            <View style={styles.buttonDone2}>
              <Text style={styles.buttonText2}>
                Выполнено
      </Text>
            </View>
          </TouchableOpacity>
        </View>
      )
    }
  }

  taskTwo() {
    if (this.state.task2) {
      return (
        <View>
          <TaskTwo />
          <TouchableOpacity onPress={() => {
            this.generateTask('Task2', 'Second Task');
            this.buttonTaskThree()
          }}>
            <View style={styles.buttonDone2}>
              <Text style={styles.buttonText2}>
                Выполнено
      </Text>
            </View>
          </TouchableOpacity>
        </View>
      )
    }
  }
 
  CongratsMsg() {
    if (this.state.allTasksComplete) {
      return (
        <View>
          <CongratsMsg />
          <TouchableOpacity onPress={this.lastButton}>
            <View style={styles.buttonDone}>
              <Text style={styles.buttonText2}>
                Получить
      </Text>
            </View>
          </TouchableOpacity>
        </View>
      )
    }
  }






  lastMessage() {
    if (this.state.zozo) {
      return (
        <View style={styles.MessageBG}>
          <View >
            {
              this.state.finishedTasks.map(task => {
                return (
                  <View>
                    <Text style={styles.MessageText}>*** {task.taskText} ***</Text>

                  </View>
                )
              })
            }
          </View>
        </View>
      )
    }
  }

  lastButton = async () => {
    this.setState({ zozo: true })

}

  buttonTaskOne = async () => {
    this.setState({ task1: true })
    try {
      
      await AsyncStorage.setItem('task1', JSON.stringify(true))

     /* firestore()
      .collection('Rooms')
      .doc(this.state.newRoomName)
      .set({
        firstVisit: false
      }, { merge: true }) */
      
  } catch (e) {
    console.log(e)
  }
}

  buttonTaskTwo = async () => {
    this.setState({ task2: true })

    try {
      
        await AsyncStorage.setItem('task2', JSON.stringify(true))
        
    } catch (e) {
      console.log(e)
    }
    
  }
 
  buttonCongrats = () => {
    this.setState({ allTasksComplete: true })
  }

  render() {
    return (
      <ImageBackground source={bgImage} style={styles.backgroundContainer}>
        <ScrollView style={styles.secondBg}>
          <DefaultMsg />

          <TouchableOpacity onPress={this.buttonTaskOne}>
            <View style={styles.buttonDone}>
              <Text style={styles.buttonText2}>
                Начать!
      </Text>
            </View>


          </TouchableOpacity>
          <View>

            {this.taskOne()}

          </View>
          <View>

            {this.taskTwo()}

          </View>
       
          <View>

            {this.CongratsMsg()}

          </View>
          <View>

            {this.lastMessage()}

          </View>
        </ScrollView>
      </ImageBackground>
    )
  }

}

标签： javascriptreactjsfirebasereact-native

javascript - Asyncstorage 恢复错误房间的状态

问题描述

解决方案

推荐阅读