Question

我正在尝试制作一个本机的To-Do应用。当从列表中删除一个项目，然后尝试在列表中添加新任务时，整个列表甚至也会显示已删除的项目。下面是我的代码

arr = []
  state = {
    text : "",
    item : [
      {id:0,data:"Loading ......"}
    ]
  }

  del = (id,data) => {
    this.setState({
      item: this.state.item.filter(item => item.id !== id)
    })
   }
  storeData = async () => {
    this.arr.push({id:Math.random().toString(),data: this.state.text})
    await AsyncStorage.setItem('key',JSON.stringify(this.arr))
    this.setState({
      item: JSON.parse(await AsyncStorage.getItem('key'))
    })
  }
  
   
  async componentDidMount() {
    this.setState({
      item: JSON.parse(await AsyncStorage.getItem('key'))
    })
    this.arr = JSON.parse(await AsyncStorage.getItem('key'))
  }

我什至尝试在storeData函数中调用del函数，但是没有用。请帮助我解决此问题。

Answer 1

您正在使用this.arr来存储要存储在AsyncStorage中的项目，但是在del函数中，您忘记了从this.arr中删除项目。在这种情况下，只需使用this.state.item就足够了，您不需要this.arr

 del = async (id,data) => {
   try {
    const newItem = this.state.item.filter(item => item.id !== id)
    await AsyncStorage.setItem('key',JSON.stringify(newItem))
    this.setState({
      item: newItem
     })
    } catch(err) {}
  }

  storeData = async () => {
    try {
      const newItem = [
         ...this.state.item, 
         {id:Math.random().toString(),data: this.state.text}
      ];
      await AsyncStorage.setItem('key',JSON.stringify(newItem))
      this.setState({
        item: newItem
      })
    } catch(err) {}
  }
  
   
  async componentDidMount() {
    this.setState({
      item: JSON.parse(await AsyncStorage.getItem('key'))
    })
  }

从react native中的列表中删除项目并更新新列表

1 个答案: