this.props недоступен при использовании ApolloClient - PullRequest
Новая
       27

this.props недоступен при использовании ApolloClient

0 голосов
/ 04 февраля 2019

Я использую apollo-boost, и я создал ApolloClient, и я хочу сделать некоторое перенаправление после запуска мутации, но я не могу получить доступ к реквизитам

index.js 

import React from "react";
import ReactDOM from "react-dom";
import { BrowserRouter } from "react-router-dom";
import { ApolloProvider } from "react-apollo";
import ApolloClient from "apollo-boost";

import "./bootstrap";
import Routes from "./RoutesComponent";

const client = new ApolloClient({
  uri: "http://localhost:4000/graphql"
});

const Root = () => {
  return (
    <ApolloProvider client={client}>
      <BrowserRouter>
        <Routes />
      </BrowserRouter>
    </ApolloProvider>
  );
};

ReactDOM.render(<Root />, document.querySelector("#root"));

RoutesComponent 

import React, { Component } from "react";
import { Route, Switch } from "react-router-dom";

import Register from "./authenticate/register/RegisterComponent";
import Login from "./authenticate/login/LoginComponent";
import Product from "./customers/product/ProductComponent";
import AddProduct from "./customers/add-product/AddProductComponent";
import Products from "./customers/products/ProductsComponent";
import AdminProduct from "./admin/product/ProductComponent";
import AdminProducts from "./admin/products/ProductsComponent";

class RoutesComponent extends Component {
  render() {
    return (
      <Switch>
        <Route path="/products/new" render={() => <AddProduct />} />
      </Switch>
    );
  }
}
export default RoutesComponent;

AddProductComponent 

import React, { Component } from "react";

class AddProductComponent extends Component {
  render() {
    console.log(this.props);
    return (
      <div>
        <h1>AddProductComponent</h1>
      </div>
    );
  }
}
export default AddProductComponent;

this.props в консоли показывает {}

, чтобы смягчить это, я также пытался использовать пакет истории, и он изменяет URLно перенаправление не работает

Я могу сделать перенаправление с использованием состояния, но я бы предпочел сделать это с помощью истории, а не состояния.

Любые советы по этому поводу будут оценены.

1 Ответ

0 голосов
/ 04 февраля 2019

Функция рендеринга Route принимает props в качестве аргумента и, поскольку вы не передаете его, она не будет доступна в компоненте 

<Route path="/products/new" render={() => <AddProduct />} />

Исправлено: 

<Route path="/products/new" component={AddProduct} />
...