Блог

Здравствуйте, я совершенно новичок в firebase, и я хотел бы знать, как я могу удалить ad, используя заголовок (или, по крайней мере, ключ?)

Вот как мне удалось перенести данные firebase в массив :

 componentDidMount(){
      firebase.database().ref('/ads').on('value', (snapshot) =>{
        var list = []
        snapshot.forEach((child)=>{
         list.push({
          key: child.key,
          title:child.val().title,
          details: child.val().details
        })
      })
     this.setState({adlist:list})
    })
   }
 

Вот как я отображался в FlatList (отображение работает):

  <FlatList 
            data={this.state.adlist}
            keyExtractor={(item)=>item.title}
            renderItem={({item})=>{
               return(
                <TouchableOpacity  OnPress ={()=>deleteAd(item.title)}>
                <View style={styles.container_2}>
                    <Text style={styles.text_style1}>{item.title}</Text>
                     <Text>{item.details}</Text>
                </View>
                </TouchableOpacity>
               )}}/>
 

Функция, которую я создал, чтобы удалить ее из firebase

 DeleteAds = (title)=>{
      dispatch(deleteAd(title));

    }

 

Это приводит к этой функции

 export const deleteAd = (title) => {
  return(dispatch)=>{
    firebase.database().ref('/ads/'   title).remove();
   
  }
 

Моя база данных firebase выглядит следующим образом:

Когда я нажимаю кнопку, она не удаляется ни из firebase, ни из массива. В принципе, ничего не происходит.

Я буду признателен, если вы найдете способ улучшить мою функцию удаления или, может быть, как я должен передавать данные firebase в массив, чтобы я мог удалять с помощью ключа.

Вы пытаетесь удалить узел по его названию. Итак, если вы удалите первый узел с заголовком dfdsd , вы удаляете путь /ads/dfdsd , которого не существует.

Чтобы удалить узел, вам нужно знать его ключ. Поэтому вам следует:

1. Визуализируйте ключ в HTML, обычно таким образом, чтобы он не был виден пользователю.
2. Затем передайте этот ключ deleteAd функции вместо заголовка.

В коде:

 <FlatList 
    data={this.state.adlist}
    keyExtractor={(item)=>item.key}
    renderItem={({item})=>{
       return(
        <TouchableOpacity  OnPress ={()=>deleteAd(item.key)}>
        <View style={styles.container_2}>
            <Text style={styles.text_style1}>{item.title}</Text>
             <Text>{item.details}</Text>
        </View>
        </TouchableOpacity>
       )}}/>
 

Вы заметите, что я также изменил keyExtractor={(item)=>item.key} , поскольку это, вероятно, также должно основываться на ключе узла, а не на его названии.