J'essaie de créer un composant qui recherchera une API REST via une requête axios, puis renverra une liste des résultats. À l'heure actuelle, je suis confronté à un problème où tout ce que j'obtiens lorsque je recherche est « non défini » et je n'ai aucune idée de pourquoi. Toutes les suggestions seraient incroyables.

Users.js

import React, { Component } from 'react';
import axios from 'axios';
import { search } from './utils';
import Users from './UsersDelete';

class App extends Component {
  state = {
    users: null,
    loading: false,
    value: ''
  };

  search = async val => {
    this.setState({ loading: true });
    const res = await search(
      `https://zuul-stage.whatifops.com/v1/user/email/${val}`
    );
    const users = await res.data.results;

    this.setState({ users, loading: false });
  };

  onChangeHandler = async e => {
    this.search(e.target.value);
    this.setState({ value: e.target.value });
  };

  get renderUsers() {
    let users = <h1>There's no movies</h1>;
    if (this.state.movies) {
      users = <Users list={this.state.users} />;
    }

    return users;
  }

  render() {
    return (
      <div>
        <input
          value={this.state.value}
          onChange={e => this.onChangeHandler(e)}
          placeholder='Type something to search'
        />
        {this.renderUsers}
      </div>
    );
  }
}

export default App;

User.js

import React from 'react';
import { truncStr } from './utils';

const User = props => {
  const { id, email, phone } = props.item;

  return (
    <div className={classes.Container}>
      <div className={classes.VoteContainer}>
        <span className={classes.Vote}>{email}</span>
      </div>

      <div className={classes.Bottom}>
        <h3 className={classes.Title}>{truncStr(phone, 19)}</h3>
      </div>
    </div>
  );
};

export default User;

UsersDelete.js

import React from 'react';
import User from './User';

const Users = ({ list }) => {
  let cards = <h3>Loading...</h3>;

  if (list) {
    cards = list.map((m, i) => <User key={i} item={m} />);
  }

  return (
    <div>
      <div>{cards}</div>
    </div>
  );
};

export default Users;

Utils.js

import axios from 'axios';

export const truncStr = (string, limit) => {
  return string.length > limit
    ? string
        .trim()
        .substring(0, limit - 3)
        .trim() + '...'
    : string;
};

const resources = {};

const makeRequestCreator = () => {
  let cancel;

  return async query => {
    if (cancel) {
      // Cancel the previous request before making a new request
      cancel.cancel();
    }
    // Create a new CancelToken
    cancel = axios.CancelToken.source();
    try {
      if (resources[query]) {
        // Return result if it exists
        return resources[query];
      }
      const res = await axios(query, { cancelToken: cancel.token });

      const result = res.data.results;
      // Store response
      resources[query] = result;

      return result;
    } catch (error) {
      if (axios.isCancel(error)) {
        // Handle if request was cancelled
        console.log('Request canceled', error.message);
      } else {
        // Handle usual errors
        console.log('Something went wrong: ', error.message);
      }
    }
};
};

export const search = makeRequestCreator();

**Mise à jour : il s'agit des informations de réponse après avoir appelé console.log(res) après la fonction de recherche entrez la description de l'image ici

0
Alyssa 28 janv. 2020 à 05:41

1 réponse

Meilleure réponse

Quelques erreurs avec votre code:

  • Il n'y a pas de propriété results sur les données renvoyées par l'API REST
  • Vous n'avez pas besoin de await sur cette ligne : const users = await res.data.results;
  • Il n'y a pas de propriété movies sur votre état

J'ai créé un codesandbox pour tester votre solution, voici une version mise à jour : https://codesandbox.io /s/async-browser-tz4p6

J'ai supprimé quelques éléments du fichier User.js qui n'étaient pas nécessaires (pour mes tests)

2
andre 28 janv. 2020 à 04:03