Как я могу обновить начальное состояние из useState из топора ios. Get return - PullRequest
Новая
       26

Как я могу обновить начальное состояние из useState из топора ios. Get return

0 голосов
/ 11 января 2020

есть! Что ж, я пытаюсь создать страницу обновления для моего личного проекта, на этой странице я хотел бы получить всю информацию о месте для спецификации c. Я храню информацию о кластере MongoDB и получаю ее с помощью запроса ax ios .get.

Позвольте мне объяснить это лучше: 

export default function({ history }) {

    window.data = {}
    const url = window.location.href.slice(-24)

    useEffect(() => {
        async function setParams() {
            const { data } = await api.get(`/spots/${url}`)

            console.log(data)
            window.data = data
            }
            setParams()
        }, [url]) 

        console.log(window.data)

//I'd like to put the window.data data inside of this 
//useStates, so I will display into the form inputs the 
//previous information to the user update it in the backend. 

        const [thumbnail, setThumbnail] = useState(null)<---
        const [company, setCompany] = useState('')<---
        const [price, setPrice] = useState('')<---
        const [techs, setTechs] = useState('')<---


    const preview = useMemo(() => {
        return thumbnail ? URL.createObjectURL(thumbnail) : null;
    }, [thumbnail])

    async function handleSubmit(event) {
        event.preventDefault()

        const data = new FormData()
        const user_id = localStorage.getItem('user')

        data.append('thumbnail', thumbnail)
        data.append('company', company)
        data.append('techs', techs)
        data.append('price', price)

        await api.put(`/updates/${url}`, data, { new: true })

        history.push('/dashboard')
    }
    return (
        <form onSubmit={handleSubmit}>
            <label 
            id='thumbnail' 
            style={{ backgroundImage: `url(${preview})` }}
            className={thumbnail ? 'has-thumbnail' : ''}
            >
                <input type='file' onChange={event => setThumbnail(event.target.files[0])}/>
                <img src={camera} alt='Select img' />
            </label>

            <label htmlFor="company">EMPRESA *</label>
            <input
                id="company"
                placeholder="Sua empresa"
                value={company}//I'd like to fill this inputs with the information that I got from the get request.
                onChange={event => setCompany(event.target.value)}
            />

            <label htmlFor="company">TECNOLOGIAS *<span>(separadas por vírgula)</span></label>
            <input
                id="techs"
                placeholder="Tenologias utilizadas"
                value={techs}
                onChange={event => setTechs(event.target.value)}
            />

            <label htmlFor="company">PREÇO *</label>
            <input
                id="price"
                placeholder="Valor por dia"
                value={price}
                onChange={event => setPrice(event.target.value)}
            />

            <button type='submit' className='btn'>Cadastrar</button>
        </form>
    )
}

Что я знаю об этом, так это то, что мне нужно визуализировать страницу или, по крайней мере, useStates ПОСЛЕ получения запроса. Я пробовал много способов сделать это, но ничего не получалось.

Должен ли я поместить все в класс и использовать Async / Await ?? Я не знаю, как изменить этот код на него.

...