Блог

Я создал перехват для доступа к коллекциям базы данных и ее методам.

 import { remote } from 'electron'
import { useState, useEffect } from "react"

function useCollections(collections = []) {

    let [dbInstances, setDbInstances] = useState(null)
    let [data, setData] = useState(null)

    // DB METHODS

    // Create
    let create = async (doc, dbName) => {
        await dbInstances[dbName].create(doc)
        let newData = await dbInstances[dbName].readAll()
        setData({ ...data, [dbName]: newData })
    }

    // Get details
    let getDetails = async (id, dbName) => {
        let doc = await dbInstances[dbName].read(id)
        return doc
    }

    // Delete
    let deleteOne = async (id, dbName) => {
         await dbInstances[dbName].deleteOne(id)
         let newData = await dbInstances[dbName].readAll()
         setData({ ...data, [dbName]: newData })
    }

    // Update
    let updateOne = async (id, updatedDoc, dbName) => {
        await dbInstances[dbName].archive(id, updatedDoc)
        let newData = await dbInstances[dbName].readAll()
        setData({ ...data, [dbName]: newData })
    }

    // EFFECTS
   
    useEffect(() => {
        console.log('mounting component')
        let newDBIs = {}
        collections.forEach(col => newDBIs[col] = remote.getGlobal(col))
        console.log('db instances settted', newDBIs)
        setDbInstances(newDBIs)
    }, [])

    // When DBs are instantiated, request all docs and set data with response
    useEffect(() => {
        if (
            dbInstances !== null amp;amp;
            data === null amp;amp;
            Object.keys(dbInstances).length === collections.length) 
        {
                console.log('setting data')
                let newData = {}
                collections.forEach(async col => newData[col] = await dbInstances[col].readAll())
                console.log('data setted => ', newData)
                setData(newData)
        }
    }, [dbInstances])

    return {
        data,
        create,
        getDetails,
        deleteOne,
        updateOne
    };
}

export default useCollections;
  

В компоненте, где используются данные, возвращаемые перехватчиком, даже если переменная data содержит ожидаемые данные, они не отображаются.

 import WindowsLayout from "../../components/layout/WindowsLayout"
import { useState, useEffect } from "react"
import { remote } from "electron"
import useCollections from "../../hooks/useCollections"

const EditWorkWindow = ({ workId }) => {

    let { data, deleteOne, updateOne } = useCollections([
        'workDB',
        'studioDB',
        'rateDB'
    ])

    useEffect(() => {
        if (data !== null) console.log(data)
    }, [data])

   
    return (
        <WindowsLayout title="Edit work window">
            <div style={{ height: 243 }} className="window-content">
                <div className="padded-more bg-gray-200">
                   <h2>{JSON.stringify(data)}</h2>
                   <button onClick={() => console.log(data)}>CLG</button>          
                </div>
            </div>
        </WindowsLayout >
    )
}

export default EditWorkWindow

  

Хук эффекта показывает ожидаемые данные по консоли.

<h2>{JSON.stringify(data)}</h2> = {}

При нажатии кнопки ожидаемые данные отображаются на консоли.

Я не могу понять, почему, если данные содержат свойства, они не отображаются в {JSON.stringify(data)}

Это то, что отображается консолью после нажатия на кнопку console.log(данные) изображения

И это пример data и их свойства

 {
   "workDB":[
      {
         "product":"Work name 1",
         "amounts_rates":[
            {
               "rate":"EflcQflqu2oWWVk2",
               "amount":6
            },
            {
               "rate":"FeMIX00pwpmZwoVW",
               "amount":1
            }
         ],
         "date":"2020-08-31",
         "studio":"BCvPeWzMiS8fZsmS",
         "_id":"2ZvHMWFODBHYWEBo",
         "createdAt":"2020-08-31T09:39:21.077Z",
         "updatedAt":"2020-08-31T09:39:21.077Z"
      },
      {
         "product":"Work name 2",
         "amounts_rates":[
            
         ],
         "date":"2020-09-02",
         "director":"",
         "_id":"PRpp1OQcJnkFKeR0",
         "createdAt":"2020-09-01T19:56:33.201Z",
         "updatedAt":"2020-09-01T19:56:33.201Z"
      }
   ],
   "studioDB":[
      {
         "name":"Studio name 1",
         "_id":"0J1AVXtgDjwBjRS9",
         "createdAt":"2020-08-25T10:18:40.004Z",
         "updatedAt":"2020-08-25T10:18:40.004Z"
      },
      {
         "name":"Studio name 2",
         "_id":"8sFH7gncaM6V7lHh",
         "createdAt":"2020-08-25T10:19:45.232Z",
         "updatedAt":"2020-08-25T10:19:45.232Z"
      }
   ],
   "rateDB":[
      {
         "name":"Rate name 1",
         "value":4.1,
         "_id":"EflcQflqu2oWWVk2",
         "createdAt":"2020-08-25T10:24:17.357Z",
         "updatedAt":"2020-08-25T10:24:17.357Z"
      },
      {
         "name":"Rate name 1",
         "value":34,
         "_id":"FeMIX00pwpmZwoVW",
         "createdAt":"2020-08-25T10:24:25.628Z",
         "updatedAt":"2020-08-25T10:24:25.628Z"
      }
   ]
}
  

Это проблема асинхронности.

 // When DBs are instantiated, request all docs and set data with response
    useEffect(() => {
        if (
            dbInstances !== null amp;amp;
            data === null amp;amp;
            Object.keys(dbInstances).length === collections.length) 
        {
                console.log('setting data')
                let newData = {}
                collections.forEach(async col => newData[col] = await dbInstances[col].readAll())
                console.log('data setted => ', newData)

                setData(newData) // <-- 👋LOOK HERE

        }
    }, [dbInstances])
  

Таким образом, вы let newData = {} очищаете объект и отправляете его, чтобы вызвать повторный рендеринг обновления путем вызова setData() , но newData в момент вызова он пуст.

В вашей функции рендеринга JSON.stringify(data) извлекаются данные, но на момент рендеринга они все еще пусты!

Только когда async col => newData[col] = await someValue вызов разрешен, вашим newData свойствам будут присвоены новые значения, newData объект останется прежним. Но к тому времени, когда это разрешено, рендеринг уже выполнен.

Решение: дождитесь разрешения вызова асинхронной функции, затем вы вызываете setData()

 useEffect(() => {
    // ...
    const promises = collections.map(async col => {
        newData[col] = await dbInstances[col].readAll())
    })
    Promise.all(promises).then(() => { setData(newData) })
})
  

Причина, по которой вы видите обновленное значение при проверке в консоли, заключается в том, что вы не проверили «достаточно быстро». К тому времени, когда вы щелкаете мышью, чтобы развернуть объект в консоли, его свойствам уже присвоены значения. Но если вы измените

 console.log('data setted => ', newData) 
// to
console.log('data setted => ', JSON.stringify(newData))
  

вы увидите пустой объект.