DataCloneError только когда я нажимаю на ссылку - PullRequest
Новая
       80

DataCloneError только когда я нажимаю на ссылку

0 голосов
/ 07 апреля 2020

Я очень новичок, чтобы отреагировать, и я пытаюсь справиться с JS как можно лучше.

Я создаю приложение для рецептов в React. Я добавил Link из пакета react-router-dom. Я использую его три раза в одном и том же компоненте - компоненте Navbar. Две ссылки работают как надо, а третья - нет. Когда я нажимаю на нее, я получаю следующую ошибку:

DataCloneError: Не удалось выполнить pushState для «History»: ...

Текст после того, как это сообщение об ошибке показывает функцию, которую я имею в файле App.js.

Странно то, что когда я перехожу к URL-адресу, который привязан к ссылке, которая дает мне ошибку через адресную строку, она работает отлично. Я думаю, что происходит, что метод PushState() пытается поместить sh дубликат объекта в объект history на глобальном объекте window, но я не уверен, как получить вокруг этого.

Я пытаюсь передать метод из файла App.js другому компоненту, но я предполагаю, что общий вопрос: «Почему я получаю эту ошибку?»

Приложение. js

class App extends Component {
state = {
    recipes: [ //an array of objects ]
}

handleAddRecipe = recipe => {. <-- Method to pass as prop
    *Does stuff*
  };

  render() {
    return (
      <React.Fragment>
        <Router>
          <Navbar
            *other props*
            handleAddRecipe={this.handleAddRecipe}
          />
          <Switch>
            <Route path="/" exact component={Main} />
            <Route path="/add-recipe" component={RecipeForm} />
            <Route path="/recipes" component={Recipes} />
          </Switch>
        </Router>
        <Footer />
      </React.Fragment>
    );
  }
}

Navbar. js

class Navbar extends Component {
  render() {
    return (
      <nav className="navbar navbar-expand-lg navbar-dark bg-dark mb-4">
        <Link to="/" exact="true" className="navbar-brand"> <--THIS LINK WORKS
          Recipe Maker
    </Link>

    <div className="collapse navbar-collapse" id="navbarSupportedContent">
      <ul className="navbar-nav mr-auto">
        <Link <--------THIS LINK DOES NOT WORK. Clicking this link produces the error mentioned above.
          className="nav-link"
          to={{
            pathname: "/add-recipe",
            state: {
              handleAddRecipe: this.props.handleAddRecipe
            }
          }}
        >
          <li className="nav-item active">
            Create Recipe <span className="sr-only">(current)</span>
          </li>
        </Link>

        <Link <--THIS LINK WORKS
          className="nav-link"
          to={{
            pathname: "/recipes",
            state: {
              recipes: this.props.recipes
            }
          }}
          tabIndex="-1"
        >
          <li className="nav-item">
            View Recipes ({this.props.numOfRecipes})
          </li>
        </Link>
      </ul>
    </div>
  </nav>
);
}
}
...