1
votes

réagir ne reconnaît pas les paramètres?

donc in react, j'ai un composant App qui rend plusieurs composants enfants comme celui-ci:

App

componentDidMount() {
    const {match: { params }} = this.props; //I used a code snippet from this video https://scotch.io/courses/using-react-router-4/route-params
    //fetch data from API
    axios
      .get(`http://localhost:5000/api/courses/${params.id}`)
      .then(results => {
        //results param came back as data from api
        this.setState({
          //set state by setting the courses array to hold the data that came from results
          course: results.data,
          user: results.data.user
        });
        //console.log(results); //By console logging I was able to see that I am getting each individual course's info in the data object
      });
  }

  //this method will be for deleting a course
  handleDelete() {
    const { match: { params }, history } = this.props;

    axios.delete(`http://localhost:5000/api/courses/${params.id}`, {
    auth: {
      username: this.props.email,
      password: this.props.pass
   }
  }).then(() => {
      history.push("/"); //I used the history object and have it push to the homepage, that way every time I delete a course I am redirected to (/) afterwards
    });
  }

Dans ce composant I avoir des paramètres pour que je puisse voir un cours par son identifiant:

CourseDetail

render() {
    return (
      //JSX inside
      <BrowserRouter>
        <div>
          <Header />
          <Switch>
            <Route exact path="/" component={Courses} />
            <Route exact path="/courses/create"  component={() => <CreateCourse email={this.state.emailAddress} pass={this.state.password} />} />
            <Route exact path="/courses/:id/update" component={() => <UpdateCourse email={this.state.emailAddress} pass={this.state.password} />} />
            <Route exact path="/courses/:id" component={() => <CourseDetail email={this.state.emailAddress} pass={this.state.password} />} />
            <Route exact path="/signin" component={ () => <UserSignIn signIn={this.signIn}/>} /> {/*pass in the signIn() in a prop called signIn to the UserSignIn component*/}
            <Route exact path="/signup" component={UserSignUp} />
            {/* <Route exact path="/signout" component={UserSignOut} /> */}
          </Switch>
        </div>
      </BrowserRouter>
    );
  }

l'erreur que j'obtiens lorsque j'essaye d'accéder au composant CourseDetail qui utilise des paramètres est:

Quelqu'un peut-il vous aider?

javascript reactjs react-router react-router-dom

0 commentaires

3 Réponses :

2
votes

Vous devez transmettre des accessoires comme celui-ci lire ici

(this.props.match).params
         |
         |__________ This is undefined  you end up `undefined.params`

Les accessoires passés au composant courseDetails n'ont pas de nom d'accessoire match et dans votre componentDidMount vous faites cela p >

"use strict";

var a = {
  a: {
    b: 1
  }
};
var b = a.x.b;

Ici, la correspondance sera indéfinie afin que vous puissiez accéder à params

Vous pouvez comprendre par cet exemple

let a = {a:{b:1}}

let {x:{b,}} = a

Le code ci-dessus est le même que ci-dessous

const {match: { params }} = this.props;

Donc finalement ici si pendant la déstructuration si vous n'avez pas de correspondance comme paramètres auxquels vous essayez d'accéder

component={props => <CourseDetail {...props} email={this.state.emailAddress} pass={this.state.password} />} />

0 commentaires

0
votes

Lorsque vous écrivez ceci

const {match: {params}} = this.props;

Cela signifie que vous vous attendez à ce que les accessoires aient un attribut match comme ci-dessous :

const params = props;

C'est pourquoi vous obtenez l'erreur spécifiée.

Si vous voulez attribuer une variable, les accessoires utilisent ceci

params = this.props.match.params;

Remarque: [Si vous entourez une variable d'un crochet const {match} = props; cela signifie que vous vous attendez à une correspondance clé dans les accessoires.

0 commentaires

2
votes

La correspondance n'est pas définie, car vous ne l'avez pas transmise au composant en tant qu'accessoires.

Pour ce faire

<Route exact path="/courses/:id/update" component={(routeProps) => <UpdateCourse email={this.state.emailAddress} pass={this.state.password} Match = {this.routeProps.Match} Location = {this.routeProps.Location}/>} History = {this.routeProps.History />

, vous pouvez ensuite obtenir votre propriété Match via routeProps.

const {match} = this.routeProps;

Ou utilisez simplement la notation de répartition des propriétés qui répartira les propriétés dans routeProps en tant que propriétés discrètes dans votre composant.

Exemple,

<Route exact path="/courses/:id/update" component={(routeProps) => <UpdateCourse email={this.state.emailAddress} pass={this.state.password} {...routeProps} />} />

Cela équivaut à écrire-

<Route exact path="/courses/:id/update" component={(routeProps) => <UpdateCourse email={this.state.emailAddress} pass={this.state.password} routeProps = {routeProps} />} />

0 commentaires