Estou usando o react hook useEffect para buscar os dados em uma API, quando a página carrega, useEffect executa 2 vezes, mas deveria executar apenas uma vez, já que declarei o segundo parâmetro (dependency array) como array vazio, em inspecionar elemento > network > XHR, dá pra ver que foram feitas 2 requisições.
const fetchWelcomeContent = async () => await api.get('welcome/getWelcomeContent').then(response => {
setEditorState(EditorState.createWithContent(convertFromRaw(JSON.parse(response.data.data))))
setIsLoading(false)
toastToggle('fas fa-times', 'Carregado')
}).catch(error => {
toastToggle('fas fa-times', error.message)
})
useEffect(() => {
fetchWelcomeContent()
}, [])
E ainda no console é exibida a seguinte mensagem:
Line 57:8: React Hook useEffect has a missing dependency: 'fetchWelcomeContent'. Either include it or remove the dependency array react-hooks/exhaustive-deps
Se eu removo o dependency array ou coloco'fetchWelcomeContent' como dependência, resulta em um loop infinito, se eu coloco a função dentro de use effect dá outro erro.
import React, { useState, useEffect } from 'react'
import * as jwt_decode from 'jwt-decode';
import api from '../../services/api'
import {getToken} from '../../services/auth'
import { EditorState, convertToRaw, convertFromRaw } from 'draft-js'
import ReactPlaceholder from 'react-placeholder'
import 'react-placeholder/lib/reactPlaceholder.css'
import { Editor } from 'react-draft-wysiwyg'
import 'react-draft-wysiwyg/dist/react-draft-wysiwyg.css'
import XDKHead from '../../components/XDKHead'
import XDKToast from '../../components/XDKToast'
import XDKButton from '../../components/XDKButton'
import './index.css'
const Welcome = () => {
const [ editorState, setEditorState ] = useState(EditorState.createEmpty())
const [ isLoading, setIsLoading ] = useState(true)
const [ toast, setToast ] = useState({ isShowing: false, type: '', message: '' })
const toastToggle = (
toggleType = toast.type,
toggleMessage = toast.message
) => setToast({
isShowing:!toast.isShowing,
type: toggleType,
message: toggleMessage
})
const saveWelcome = async () => {
await api.post('welcome/setWelcomeContent', `{
"user":"${jwt_decode(getToken()).sub}",
"editorContent":${JSON.stringify(convertToRaw(editorState.getCurrentContent()))}
}`).then(response => {
//console.log(response)
}).catch(error => {
console.log('error: ', error)
})
}
useEffect(() => {
const setWelcomeContent = async () => {
await api.get('welcome/getWelcomeContent').then(response => {
setEditorState(EditorState.createWithContent(convertFromRaw(JSON.parse(response.data.data))))
setIsLoading(false)
toastToggle('fas fa-times', 'Carregado')
}).catch(error => {
toastToggle('fas fa-times', error.message)
})
}
}, [])
return (
<>private code here...</>
) // return
} // Welcome
export default Welcome
async
eawait
...