const {data} = useSWR('/api/path',fetcher) //получаем список объектов
useEffect(()=>{
console.log(data) // данные отображаются
},[data])
const handleClick = () => {
/......./
console.log(data) <-- data undefined
/....../
}
return (
<>
<Button onClick={handleClick}>Action</Button>
<ComponentForDisplayData data={data}/>
</>
)
}
Запрос отправился и данные отобразились в компоненте. Но при нажатии на кнопку -> data=undefined... Почему?....
оберни функцию в useCallback
Какую? Обработки клика?
да и в не забудь data в массиве колбэка указать
const handleClick = useCallback( () => { /......./ console.log(data) <-- data undefined /....../ },[data]) data все равно undefined
тут в чём-то другом проблема. попробуй воспроизвести на codesandbox
Попробуй небольшой хак, пробрось данные в функцию клика на прямую
Странно... В сандбоксе работает...
вот теперь надо смотреть, в чём различие) у меня так же бывает часто, пытаешься воспроизвести и всё работает
На нет все тоже самое. Адрес другой только.... Или react-table что-то с данными делает....
такое ощущение что кешируется как-то коллбэк с первым значением data, а оно - undefined
может Button компонент кеширует?
Button это просто кнопка в onClick котого повешена стрелочная функция. В этой функции идет обращение к data
Вот получается при первом рендере data=undefined. Если переключить страницу на другую и потом вернуться то data уже есть данные
у тебя случайно компонент в memo не обёрнут?
Нет
идеи кончились)
memo только внутри компонета используется
попробуй без него
у тебя реактивность не реактивная 😳
useMemo использован для react-table
Вот что интересно: Я использую react-table Колонки определены так: ``` const columns = useMemo(()=>[ ....... { Header: '', id: 'action', Cell: ({row}) => (<Button color={"primary"} outline className={"ml-1"} onClick={()=>handleClick(row.original.id)}>Action.....</Button>) } ],[]) И у кнопки такое поведение.... Разместил для теста кнопку с имитаций нажатия. Отрабатывает всегда корректно
Ну собственно вот так: const columns = useMemo( ()=>[ ....... { Header: '', id: 'actions', Cell: ({row}) => (......) } ],[data] ) Все работает коректно
Конечно, чем вообще мемоизация должна была помочь
Ререндер не происходит наверное и при инициализации undefined попадает. Хотя там вроде промис. В онлайн редактор залей
Обсуждают сегодня