i'm trying to update data from firebase realtime database.

This is a warehouse management application, in which the user initially create a object with some data, then may need to change the data when something happen to the warehouse without creating a new object.

Right now i'm fetching data from the server to a specific ID with get() function.

Then i display the data and allow the user to change some fields as needed.

Finally i would like to update the data in the server.

import { getDatabase, ref, get, child, update} from "firebase/database";


const UpdateItem = () => {
  const [data, setData]=useState({
    numero: 0,
    date: '' ,
    nome: "",
   battistrada:'',
    cognome: "",
    nomeAzienda: "",
    modello: "",
    targa: "",
    telefono: "",
    mail: "",
    quantità: '',
    misura: "",
    marca: "",
    cerchi: "",
  })
  const [searchParams,setSearchParams]=useSearchParams()
  const [success, setSuccess] = useState(false);
  const dbRef =ref(getDatabase());

  const dateFormat = "DD/MM/YYYY";


  //get current data
  useEffect(() =>get(child(dbRef,'lavorazione/'   searchParams.get('id'))).then((snapshot)=>{
    if(snapshot.exists()){
        setData(snapshot.val())
        console.log('[CONVERTED-DATA]',snapshot.val(), '[stato]', data);
    }else{
        console.log('[GET] NO data available')
    }
}).catch((error)=>{
    console.log(error)
})
 , [])

//update data
 const updateHandler=()=>{
  update(ref(dbRef, 'lavorazione/'   searchParams.get('id')), data)
  setSuccess(true); 
  console.log("[PRE-TIMEOUT", success);
  setTimeout(() => {
    setSuccess(false);
    console.log("[TIMEOUT]", success);
  }, 5000);
}

//... handlers to update the state

 return (
    <Form
      form={form}
      layout="vertical"
      onFinish={updateHandler}
      autoComplete="off"
    >
      <Row>
        <Col lg={12} xs={24} sm={24} className="form-container">
          <h2>CODICE LAVORAZIONE</h2>
         <Space direction="vertical" size='large'>
         <span style={{fontSize:'32px'}}>{data.numero}</span>
         <DatePicker
              onChange={onChangeDate}
              format={dateFormat}
              placeholder={data.date}
              name="date"
             
       
            />
          </Space>
          <h2>ANAGRAFICA CLIENTE</h2>
          <Form.Item
            name="nome"
            label="Nome"
            rules={[ { type: "string", min: 3 }]}
            initialValue={data.nome}

          >
            <Input
              placeholder={data.nome}
              value={data.nome}
              name="nome"
              onChange={onChange}
            />
          </Form.Item>
          <Form.Item
            name="cognome"
            label="Cognome"
            rules={[ { type: "string", min: 3 }]}
            initialValue={data.cognome}
          >
            <Input
              placeholder={data.cognome}
              value={data.cognome}
              name="cognome"
              onChange={onChange}
            />
          </Form.Item>
          
          //other inputs down there

According to firebase documentation this should work fine, instead i'm actually getting TypeError: db._checkNotDeleted is not a function

Is there somethign wrong with the way i'm using ref?

thank you in advance

CodePudding user response：

update(ref(dbRef, 'lavorazione/'   searchParams.get('id')), data)

should be

update(dbRef, data)

Where data should be in the form of { path: value }

e.g.

{
    'lavorazione/1234': 'somevalue'
}

Multiple updates example

const updates = {}

update[`lavorazione/${searchParams.get('id1')}`] = 'some value'
update[`lavorazione/${searchParams.get('id2')}`] = 'some value for id2'
update[`lavorazione/${searchParams.get('id3')}`] = 'some value for id3'

update(dbRef, updates)

https://firebase.google.com/docs/database/web/read-and-write#updating_or_deleting_data