Гугли NODE_PATH или вебпак алиасы

Чтобы не писать относительные пути

документация реакта тебе зачем?

этот чат тебе зачем?

красавчик

красавчик

обидно

за душу взяло

этот чат тебе зачем?

Не нужен

ну так ливни

если тебе не нужен

Фолкс, мне нравятся функциональные компоненты и хуки, но как отличить mount от update? Мне нужно выполнять определённую логику только на изначальном отображении компонента. Usecase: предзагруженная первая страница асихронного списка. Нужно проверить, есть в пропсах уже загруженный список, и если есть, то выводить его и не бежать на сервер. Иначе - отправиться на сервер.

Можешь смотреть, если переменная пустая

( равна первоначальному значению )

При этом условие записывается

Покрасивее хочется...

Потому что DidMount и DidUpdate - как раз решили бы вопрос, но нам предлагают вместо них useEffect... но получается, что с хуками я не могу добиться поведения, как в класс-компонентах.

Фолкс, мне нравятся функциональные компоненты и хуки, но как отличить mount от update? Мне нужно выполнять определённую логику только на изначальном отображении компонента. Usecase: предзагруженная первая страница асихронного списка. Нужно проверить, есть в пропсах уже загруженный список, и если есть, то выводить его и не бежать на сервер. Иначе - отправиться на сервер.

На память не помню, но в доке это точно есть, посмотрите набор хуков

Если передать в useEffect вторым аргументов пустой массив, получается по сути DidMount. Окей, а как теперь DidUpdate сделать?

Если передать в useEffect вторым аргументов пустой массив, получается по сути DidMount. Окей, а как теперь DidUpdate сделать?

Маз рандом) Но зачем? Логика в дидапдейт - антипатерн

Маз рандом) что?

Маз рандом) Но зачем? Логика в дидапдейт - антипатерн

🤔

Если передать в useEffect вторым аргументов пустой массив, получается по сути DidMount. Окей, а как теперь DidUpdate сделать?

ничего не передавать во втором аргументе

ничего не передавать во втором аргументе

Всё равно вызывается при начальной загрузке.

ну да, это не обойти

логику пересмотри

прямым образом классы переносить не всегда верно

Да я с нуля пишу. )

👋

Тем более тогда, должно быть проще)

Сейчас у меня получается, что я не могу отделить кейсы изначального открытия первой страницы и намеренного перехода к ней после другой страницы.

Ну кроме грязного хака типа устанавливать значение переменной initialRender = false...

Если ты переходишь с другой страницы нужный компонет же анмаунтится?

Имел в виду переход в пагинаторе от страницы 2 к странице 1.

Фолкс, мне нравятся функциональные компоненты и хуки, но как отличить mount от update? Мне нужно выполнять определённую логику только на изначальном отображении компонента. Usecase: предзагруженная первая страница асихронного списка. Нужно проверить, есть в пропсах уже загруженный список, и если есть, то выводить его и не бежать на сервер. Иначе - отправиться на сервер.

useEffect(() => { if (isPageInList(props.page)) { return } fetchData(); }, [props.page])

Сейчас у меня получается, что я не могу отделить кейсы изначального открытия первой страницы и намеренного перехода к ней после другой страницы.

Это и не нужно определять в компоненте

Сейчас примерно такое условие: const [items, setItems] = React.useState(props.config.initialItems || []); // Через props могут передаваться изначальные item'ы - тогда не нужно сразу идти на сервер за данными if (items.length == 0 || pageNumber !== 1) { сходи на сервер, загрузи данные }

И при этом условии работает всё, кроме кейса, когда я в пагинаторе переключился на страницу 2, а потом нахзад на страницу 1 - загрузка не происходит, потому что в items уже записаны данные.

И при этом условии работает всё, кроме кейса, когда я в пагинаторе переключился на страницу 2, а потом нахзад на страницу 1 - загрузка не происходит, потому что в items уже записаны данные.

чет сложно как то, можешь на кодпен какой нибудь запостить?

Получается, что мне нужно знать, это я сейчас изначально на странице 1 нахожусь, или это я на ней со старницы 2 вернулся...

да...

Звучит как обычный механизм пагинации, попробуй логику ее в спецальный компонент или хук вынести. По идее тебе как раз нужен useEffect для такой ситуации с обработкой начального рендера

useEffect(() => { if (isPageInList(props.page)) { return } fetchData(); }, [props.page])

Поясните, плиз

Поясните, плиз

Функция внутри useEffect будет вызываться только когда меняется props.page, да?

Функция внутри useEffect будет вызываться только когда меняется props.page, да?

именно

Поясните, плиз

Короче хранишь где нибудь список с данными которые нужно отображать, можно во вне, можно прям в стейте твоего компонента списка с пагинацией. Передаешь пропсом в него страницу. Чекаешь есть ли данные для этой страницы. Да - показываешь, нет - загружаешь.

как можно использовать и dangerouslySetInnerHTML и children?

нужно в тег p вставить текст с <br/>aми + span с onClick

чет сложно как то, можешь на кодпен какой нибудь запостить?

https://codepen.io/anon/pen/GaZQvJ

Если в JS раскомментить // window.initialItems = []; - то это кейс, когда предзагруженных данных нет

Всё работает, кроме перехода со второй страницы на первую.

мне кажется проблема в React.useState(props.initialItems || []) надо одно или другое выбрать

https://codepen.io/anon/pen/GaZQvJ

Я бы обрабатывал начальные данные также как все остальные и не пытался их таким образом подкладывать

консистенси больше

мне кажется проблема в React.useState(props.initialItems || []) надо одно или другое выбрать

Если не подали initialItems, то пустой массив, что здесь не так?

Я бы обрабатывал начальные данные также как все остальные и не пытался их таким образом подкладывать

Ну, в этом как раз и стоит задача. Чтобы при заходе на html-страницу айтемы первой страницы данных уже были отрисованы без дополнительного запроса на сервер.

а данные о пользователе который только что залогинился где можно хранить? В локал сторейдже?

Ну, в этом как раз и стоит задача. Чтобы при заходе на html-страницу айтемы первой страницы данных уже были отрисованы без дополнительного запроса на сервер.

Из за этой разницы и не получается сделать. Добавить тогда условие if (page === 1) setItems(props.initialItems)

лучше такие вещи в одном месте обрабатывать а не разносить

потому что функционал по сути один

а это вообще нормально, что при обновлении хранилища редукса, ремаунтится компонент?

т.е. при использовании редукса практически отпадает смысл использования стейта?

Ну, в этом как раз и стоит задача. Чтобы при заходе на html-страницу айтемы первой страницы данных уже были отрисованы без дополнительного запроса на сервер.

У тебя там используется redux или что-то подобное?

Сейчас нет, а чем это поможет?

У меня один реактовый компонент без вложенностей на обычной html странице (не spa). Redux, по-моему, тут ни к чему. ... ну, почти без вложенностей.

Сейчас нет, а чем это поможет?

от этого зависит как лучше решить твою задачу

Стейт-менеджера нет

и не нужен

Сделал через const [isInitialRender, setIsInitialRender] = React.useState(true);... 30 секунд заняло, работает, но фу буэ.

Всем привет есть вопрос Делаем связку React + Laravel + авторизация через Google (G-Suite) есть пару вопросов как это все правильно организовать, нужна платная консультация по этому поводу. Кто может помочь ?

Сделал через const [isInitialRender, setIsInitialRender] = React.useState(true);... 30 секунд заняло, работает, но фу буэ.

хреновое решение так то

С удовольствием перепишу на что-нибудь покрасивее. Если есть предложения... =)

Из за этой разницы и не получается сделать. Добавить тогда условие if (page === 1) setItems(props.initialItems)

чем нет

т.е. при использовании редукса практически отпадает смысл использования стейта?

иногда локальный стейт удобнее, если он только в этом компоненте используется

иногда локальный стейт удобнее, если он только в этом компоненте используется

я не про удобство говорю... я говорю о том, что ремаунтится компонент по непонятным причинам. а когда компонент ремаунтится, то его сетйты обновляются

Нужно на конкретном примере кода смотреть. Причины в любом случае есть)

я вообще заметил какоето странное поведение. примерная структура проекта: в рендере компонента App содержится роутер и вывод списка простого через map. так вот при обновлении списка ремаунтится компонент из роутера

сейчас покажу

class App extends Component { constructor(props) { super(props); this.state = { testdata: [], open: false, connected: false, }; } componentDidMount() { this.serverRequest = axios .get("/testdata") .then((result) => { this.setState({testdata: result.data}); }); } render() { const testitems = this.state.testdata.map((testitem, i) => { return( <SimpleAxiosGetItem key={i} testitem={testitem}/> ); }); return ( <div> <BrowserRouter> <Suspense fallback={<div>Loading...</div>}> <div> <div> <MenuBar/> </div> <div className={"workplace"}> <Route path="/web/" exact component={() => <Ping websocket={this.socket}/>} /> </div> </div> </Suspense> </BrowserRouter> <div className={"workplace"}> <div> {testitems} </div> </div> </div> ); } }

как то так

косяк в том, что при вызове this.setState({testdata: result.data}) ремаунтится компонент Ping

Добрые вечер товарищи. Кто-нибудь делал таблицы из компонента Grid который в библиотеке react-virtualized? Я знаю что есть Table, но он не подходит, т.к. много колонок в таблице. Проблема в том что нужно прикрутить шапку к компоненту Grid, у меня получилось синхронизировать два скролла, но второй немного отстает от Grid скролла

class SimpleAxiosGetItem extends Component { render() { return ( <div key={this.key}>{this.props.testitem}</div> ) } }