Size: a a a

React — русскоговорящее сообщество

2020 November 21

AQ

Ace Qnemes in React — русскоговорящее сообщество
Получается идет fetch данных с помощью колбек функции из родительского компонента.  Как тут подождать её выполнения и зарендерить тут уже этот conditional rendering?

           <Search onSubmit={onSubmit} />
           {images.length ? renderImageList() : renderError()}
источник

AQ

Ace Qnemes in React — русскоговорящее сообщество
Так выглядит передаваемая функция:

const onUnsplashSearchSubmit = async input => {
       const response = await unsplash.get('/search/photos', {
           params: {
               query: input,
               per_page: amount,
           }
       });
       setImages(response.data.results);
   }
<Route path="/images/:query" exact component={() => <ImageList images={images} onSubmit={onUnsplashSearchSubmit} />} />
источник

AQ

Ace Qnemes in React — русскоговорящее сообщество
Потому что, на onSubmit я получаю на доли секунды ошибку, а уже потом список, ибо не успевает выполниться получение данных из АПИ
источник

AT

Alexey Tsibrovskii in React — русскоговорящее сообщество
Так может вместо ошибки показывать Loading? Во время запроса
источник

AQ

Ace Qnemes in React — русскоговорящее сообщество
Ну это да, ну если там по запросу не будет резов будет вечный лоадинг (
источник

Д

Денис in React — русскоговорящее сообщество
Ace Qnemes
Ну это да, ну если там по запросу не будет резов будет вечный лоадинг (
А обработать сообщением типа "данных нет"? (Хотя апи редко отвечают пустотелом)
источник

AQ

Ace Qnemes in React — русскоговорящее сообщество
Дык там и есть:  No results were found
источник

AQ

Ace Qnemes in React — русскоговорящее сообщество
Ну я повторюсь, оно ведь проскакивает на доли секунд, пока фетч не выполнился до конца
источник

Д

Денис in React — русскоговорящее сообщество
Ace Qnemes
Ну я повторюсь, оно ведь проскакивает на доли секунд, пока фетч не выполнился до конца
ComponentDidMount?
источник

Д

Денис in React — русскоговорящее сообщество
Или тебе не помогает?
источник

AQ

Ace Qnemes in React — русскоговорящее сообщество
не шарю как его вставлять ибо идет App component (он же главный, родительский) в нем я фетчу данные без useEffect и передаю этот фетч как колбэк на onSubmit уже в дочерний компонент ImageList как в примере выше
источник

AQ

Ace Qnemes in React — русскоговорящее сообщество
не понимаю какие зависимости должны тогда быть в useEffect, если там фетчится на onSubmit, ивенты могут быть зависимостями?Или я чего-то не понимаю
источник

AP

Anatoly Politsin in React — русскоговорящее сообщество
Anatoly Politsin
Спасибо,

Подскажите ещё плиз, как мне в редьюсере поменять свойство внутри дерева.

let current = state.products.find(c=> c.id == action.payload.id)?.chosen;

console.log(current, action.payload.checked);

return state;
часть выше работает. Нужно вернуть состояние с поменяным chosen.

я пытаюсь сделать как-то так:
return {...state, products: state.products.find(c=> c.id == action.payload.id)!.chosen = action.payload.checked}
и оно даже компилится, но потом вываливается с ошибкой при первом же чеке, а я не до конца понимаю как управляться с таким синтаксисом

при клике оно грохает текущее дерево, наверно я пытаюсь что-то поменять не в том уровне
    case LVL1_CHECKBOX:
     const products = state.products.map(c => {
       if (c.id == action.payload.id) {
         c.chosen = action.payload.checked
       }
       return c;
     });
     state.products = products;
     return state;
Норм или лучше как-то под другому?
(ещё у меня по результату этой деятельности стейт меняется - видно в отладке - но картинка не перерисовывается, но наверно это по другой причине)
источник

Д

Денис in React — русскоговорящее сообщество
Ace Qnemes
не понимаю какие зависимости должны тогда быть в useEffect, если там фетчится на onSubmit, ивенты могут быть зависимостями?Или я чего-то не понимаю
А ты не думал рендерить компонент когда данные уже появились в стейте?)
источник

Д

Денис in React — русскоговорящее сообщество
Пример нужен?
источник

S

Stanislav in React — русскоговорящее сообщество
Anatoly Politsin
    case LVL1_CHECKBOX:
     const products = state.products.map(c => {
       if (c.id == action.payload.id) {
         c.chosen = action.payload.checked
       }
       return c;
     });
     state.products = products;
     return state;
Норм или лучше как-то под другому?
(ещё у меня по результату этой деятельности стейт меняется - видно в отладке - но картинка не перерисовывается, но наверно это по другой причине)
вполне
источник

AQ

Ace Qnemes in React — русскоговорящее сообщество
Денис ну images и есть моим стейтом, давай покажи на примере, просто видишь мой условный оператор?Я его могу просто изменить и там будет Loading вместо error, но тогда вопрос в другом, как проверить, что запросов не найдено было?
источник

AP

Anatoly Politsin in React — русскоговорящее сообщество
Stanislav
вполне
ого, спасибо!
(думал хрень написал)
источник

Д

Денис in React — русскоговорящее сообщество
Ace Qnemes
Денис ну images и есть моим стейтом, давай покажи на примере, просто видишь мой условный оператор?Я его могу просто изменить и там будет Loading вместо error, но тогда вопрос в другом, как проверить, что запросов не найдено было?
Тебе приходит ответ, обработай его
источник

AQ

Ace Qnemes in React — русскоговорящее сообщество
Короче нужно 3 проверки на наличие данных, на их отсутствие и их загрузку
источник