BA
Тогда как мне сунуть в зависимости динамический набор объектов? )
я не знаю, что у тебя за задача, не вижу кода, не буду гадать, ну не суй, тогда еффекта не будет
Size: a a a
2020 July 28
GB
я не знаю, что у тебя за задача, не вижу кода, не буду гадать, ну не суй, тогда еффекта не будет
BA
Знатокам хуков вопрос! Вот у меня стейт айтемов с постраничной подгрузкой которые пользователь может отмечать (это урезанный кусок, только то что к делу относится):
И эффект при изменении se
co
Вопрос. Как красиво сделать, чтоб onSelect вызывался только с изменившимися аргументами и не вызывался, например, при подгрузке дополнительных айтемов?
{
items: FileDataItem[],
selection: number[],
}И эффект при изменении se
lection, который дергает onSelect св-во переданное сверху, в котором отдаются айтемы:co
nst onSelectProp = props.onSelect;Сейчас props.onSelect вызывается больше раз чем нужно, потому что зависимость в этом эффекте на самом деле не [selection, items], а [selection, <items на которые указывает selection>]
useEffect(() => {
onSelectProp(state.selection.map(i => state.items[i]));
}, [onSelectProp, state.selection, state.items]);
Вопрос. Как красиво сделать, чтоб onSelect вызывался только с изменившимися аргументами и не вызывался, например, при подгрузке дополнительных айтемов?
{
items: FileDataItem[],
selection: number[],
}
в useState?GB
если у тебя работает щас, задизабли строчку зависимостей и всё)
Я в итоге оставил эту неоптимальность. Выше в иерархии просто код так будет написано, что ему не важно, что onSelect может несколько раз вызываться с одними и теми же аргументами
GB
{
items: FileDataItem[],
selection: number[],
}
в useState?В useReducer
BA
сделай в кодебоксе пример, всем будет лучше
GB
Это абсолютно не важно, это могут быть отдельные переменные с таким же успехом (
BA
Я думал, что я действительно могу вытащить зависимости динамически. Но к сожалению react ругается, когда массив зависимостей динамически меняется.
const onSelectProp = props.onSelect;
const selected = useMemo(() => state.selection.map(i => state.items[i]), [
state.selection,
state.items,
]);
useEffect(() => {
onSelectProp(selected);
}, [onSelectProp, ...selected]);https://codesandbox.io/s/intelligent-forest-f5zrf?file=/src/App.js
хз, все нормально, не так мб понял, ссылку передал, массив передел
хз, все нормально, не так мб понял, ссылку передал, массив передел
BA
ничего с массивом не случится , 1 раз сверит и все, что то еще у тебя тригерит, onSelectProp мб
GB
ничего с массивом не случится , 1 раз сверит и все, что то еще у тебя тригерит, onSelectProp мб
Попозже сделаю в паблике, тогда обсудим. Пока я смирился с несколькими вызовами коллбэка.
AN
@gblack9 спортивный интерес, а почему в
useEffect делаешь а не в хендлере который дергается на выбор item'а?lL
здраствуйте кто то работал с raect-native в CRM Shopify ?
GB
Andrei Nikitin
@gblack9 спортивный интерес, а почему в
useEffect делаешь а не в хендлере который дергается на выбор item'а?Ну это логично же. Изменилось сотояние выделения - это эффект. Но первый вариант, который я написал действительно делал это в хэндлере. Разницы никакой, просто я получил циклическую зависимость в это хендлере и старые данные из стейта. Там в хэндлере вызывается редьюсер, который стейт меняет и только после этого надо что-то дергать (ну или усложнять логику и делать двойную работу - и редьюсер вызывать и копию стейта для эффекта собирать)
GB
Можно ещё было ввобще стейт выделения и данные поднять вверх по иерархии компонентов, но хотелось именно изолировать всё это в компоненте с простым интерфейсом... сейчас у него вот такой интерфейс и это вроде хорошо работат (ну за исключением лишних вызовов onSelect):
type Props = {
onSelect: (files: FileDataItem[]) => void;
limit?: number;
};
CameraRollPicker: React.FC<Props>AN
вот мне не сказать чтобы логично. в моем розовом мире как раз таки хендлер по идее должен иметь ответственность за манипуляцию данными. в схожем кейсе я в самом хендлере получаю expectedSelectedItems и диспатчу куда уему там нужно
const handleOnSelect = React.useMemo(() => (item: FilterItemPrototype) => () => {
const alreadyInSelected = Boolean(R.contains(item.id, selectedPoints))
const appender: any = alreadyInSelected ? R.without : R.append
const expectedSelectedPoints = appender(item.id, selectedPoints)
setSelectedPoints(expectedSelectedPoints)
}, [
selectedPoints,
setSelectedPoints,
])VK
Коллбэки в эффектах лучше не вызывать, это черевато
VK
Я думал, что я действительно могу вытащить зависимости динамически. Но к сожалению react ругается, когда массив зависимостей динамически меняется.
const onSelectProp = props.onSelect;
const selected = useMemo(() => state.selection.map(i => state.items[i]), [
state.selection,
state.items,
]);
useEffect(() => {
onSelectProp(selected);
}, [onSelectProp, ...selected]);Это отличный пример, как делать ни в коем случае нельзя
GB
Коллбэки в эффектах лучше не вызывать, это черевато
Можно тогда, я уточню, что в вашем понимании "эффект"? )
VK
Можно тогда, я уточню, что в вашем понимании "эффект"? )
useEffect
GB
useEffect
Ок, и что там можно делать? (в ф-ции, которая в useEffect передается)