Задать вопрос

Воващ

Ответы пользователя по тегу React

  • Обязательно ли роутинг должен быть внутри app.js?

    @V0vash
    нет, импортируй роутинг из другого места 
    render() {
        return(
            <div className="App">
                {routes}
               <Footer />
            </div>
        )
    }
}


    вот мой плюшевый пример с авторизацией 
    import React from 'react';
import {BrowserRouter as Router} from 'react-router-dom';
import {useRoutes} from './routes';
import {useAuth} from './hooks/auth.hook'
import {AuthContext} from './context/AuthContext'
import 'bootswatch/dist/sketchy/bootstrap.min.css'


function App() {
  const {token, login, logout, userId} = useAuth()
  const isAuthenticated = !!token
  const routes = useRoutes(isAuthenticated)

  return (
  <AuthContext.Provider value={{token, login, logout, userId, isAuthenticated}}>
    <Router>
      <div className="App container">
        {routes}
      </div>
    </Router>
  </AuthContext.Provider>
  );
}

export default App;


    import React from 'react'
import {Switch, Route, Redirect} from 'react-router-dom'
import AdminPage from './pages/AdminPage'
import MainPage from './pages/MainPage'
import AuthPage from './pages/AuthPage'
import PostPage from './pages/PostPage'

export const useRoutes = isAuthenticated =>{
    if(isAuthenticated){
        return(
            <Switch>
                <Route path="/admin" exact>
                    <AdminPage/>
                </Route>    
                <Redirect to="/admin"/>
            </Switch>
        )
    }

    return(
        <Switch>
            <Route path="/" exact>
                <MainPage/>
            </Route>
            <Route path="/post/:id" exact>
                <PostPage/>
            </Route>
            <Route path="/login" exact>
                <AuthPage/>
            </Route>
            <Redirect to="/"/>
        </Switch>
    )
}
    Ответ написан
    Комментировать
    Комментировать

  • Как реализовать имитацию получения данных по API?

    @V0vash
    имитация get запроса к json

    export default class GetService{
    _apiBase = 'http://localhost:3000';

    async getResource(url) {
        const res = await fetch(`${this._apiBase}${url}`);
        if (!res.ok) {
            throw new Error(`Could not fetch ${url}` + 
                `, received ${res.status}`);
        }
        return await res.json();
    }

    и как url скорми ему путь к json'y ;)
    Ответ написан
    3 комментария
    3 комментария

  • Для чего нужен middleware?

    @V0vash
    Например: есть конвейер, по которому движется пальто. На конвейере работают Зина и Людмила. Зина пришивает пуговку, Людмила прикладывает бирку. Внезапно, появляется middleware Лена, встает между Зиной и Людмилой и красит пуговку в хипстерский модный цвет. Так как Лена после покраски не уносит пальто с собой, а передает дальше, то Людмила как ни в чем не бывало приделывает бирку и пальто готово. Только теперь оно хипстерское. Усиленное.
    Читай тут
    Ответ написан
    Комментировать
    Комментировать

  • React хук для запросов отдает неправильные данные?

    @V0vash
    Стоит обернуть в хук useCallback.

    будет примерно так 
    const request =  useCallback(async (url, method = 'GET', body = null, headers ={}) => {
        setLoading(true)
        try{
            if (body) {
                body = JSON.stringify(body)
                headers['Content-Type'] = 'application/json'
            }

            const response = await fetch(url, {method, body, headers})
            const data = await response.json()

            if (! response.ok){
                throw new Error(data.message || 'Что-то пошло не так')
            }

            setLoading(false)

            return data
        }catch(e){
            setLoading(false)
            setError(e.message)
            throw e
        }
    }, [])
    Ответ написан
    Комментировать
    Комментировать