Gatsby navigate возвращает массив при передаче данных

Question

Моя проблема в том, что когда я передаю функции navigate Гэтсби какое-либо значение учетной записи в его состояние, в компоненте GoogleSingIn он отображается как массив. Я хочу напечатать это значение и не знаю, как это сделать

import React, { Component } from "react"

class GoogleSignIn extends Component {
  constructor({ location }) {
    super({ location })
    console.log(location.state)
  }
  render() {
    return <></>
  }
}

export default GoogleSignIn

и Register компонент

handleGoogle = () => {
    firebase
      .auth()
      .signInWithPopup(provider)
      .then(result => {
        const token = result.credential.accessToken
        const user = result.user
        navigate("/google-sign-in", { state: user.displayName })
      })
...
}

Answer 1

В компоненте класса, состояние, переданное navigate, доступно в this.props.location.state

// index.js
import React from "react"
import { navigate } from "gatsby"

const IndexPage = () => (
  <>
    <form
      onSubmit={event => {
        event.preventDefault()
        navigate("/page-2", {
          state: { foo: "bar" },
        })
      }}
    >
      <input type="submit" />{" "}
    </form>
  </>
)

export default IndexPage

---

// page-2.js
import React, { Component } from "react"
import { Link } from "gatsby"

class SecondPage extends Component {
  render() {
    console.log(this.props.location.state)
    return (
      <>
        <h1>Hi from the second page</h1>
        <Link to="/">Go back to the homepage</Link>
      </>
    )
  }
}

export default SecondPage

Примечание:

Обязательно передайте объект :

navigate("/google-sign-in", { state: {user: 'jackowsky'} })

вместо строки:

navigate("/google-sign-in", { state: 'jackowsky' })

в противном случае это выглядит так, как будто вы будете преобразованы в объект, который вы не хочу:

Object {0: "j", 1: "a", 2: "c", 3: "k", 4: "o"…}