Функция навигации в Gatsy возвращает неопределенное значение
Столкнулся с проблемой с функцией navigate() в Gatsy, с помощью функции навигации можно передать объект вторым параметром на другую страницу. Сделал как в документации, но при получении данных получаю undefined.
const Panel = () => {
const [name, setName] = useState('')
useEffect (() => {
if (name !== undefined) {
setName('Hello World')
}
}, [name])
const handleRedirect = () => {
navigate('/cabinet/', { state: { name }})
}
return (
<div>
<button onClick = {handleRedirect}>Redirect</button>
<div>
)
}
const Cabinet = ({location}) => {
console.info(location.state.name) // undefined
return (
<div>
<h1>{location.state.name}</h1>
</div>
)
}
![Безумие обратных вызовов в javascript [JS]](https://i.imgur.com/WsjO6zJb.png)
Ответы 1
Ваша проблема связана с таймингами/асинхронностью. Ваша встроенная функция navigate выглядит хорошо, однако вы устанавливаете name (с помощью установщика setName) после того, как происходит навигация. Кроме того, вам не хватает key для состояния. Попробуйте что-то вроде:
const handleRedirect = () => {
if (name) navigate('/cabinet', {state: {'name': name}}); // Try hardcoding Hello World for debugging purposes {'name'; 'Hello World'}
}
Затем в компоненте кабинета:
const Cabinet = ({location}) => {
console.info(location.state.name) // will be your Hello World
return (
<div>
<h1>{location.state.name}</h1>
</div>
)
}
В качестве альтернативы вы можете использовать подход async/await, например:
const setNameFunction = ()=>{
setName('Hello World')
return name
}
const handleRedirect = async () => {
let nameFromFunction= await setNameFunction;
navigate('/cabinet/', { state: { 'name': nameFromFunction }}) // use if (nameFromFunction) navigate('/cabinet/', { state: { name: nameFromFunction }}) alternatively
}
Этот второй подход сделает экосистему динамичной, позволяя вам передавать пользовательское имя на основе некоторой логики, которую вам нужно будет добавить (передавая name в качестве параметра через эти функции).
Кроме того, вы можете искать свое состояние в компоненте Cabinet, используя объект window в window.history.state.
Можете ли вы попробовать что-то вроде: const handleRedirect = () => { setName("Hello World"); if (name) navigate('/cabinet/', { state: { name }}) }. По сути, установка имени в той же функции, в которой запускается навигация.
Я понял вашу проблему @Bavarius, используйте navigate, например: navigate("/cabinet/", { state: { yourName: name },}) По сути, вам не хватает ключа
Я пробую это { state: { name: name }}, но получаю ошибку при вызове location.state.nameTypeError: Cannot read property 'state' of undefined
Можете ли вы отладить весь объект props или location, чтобы проверить, что он получает?
location - не определено после отладчика
Давайте продолжим обсуждение в чате.
Спасибо за код, но все же
undefinedкогда я хочу получить данные из {местоположения} в другом компоненте