De réagir .la carte n'est pas une fonction

J'essaie d'apprendre à Réagir et je suis un novice quand il s'agit de Javascript. Maintenant, je travaille sur une application qui est de l'extraction de données provenant de Flickr API. Le problème est que lorsque j'essaie d'utiliser la méthode map sur les accessoires dans le Main.js composant, j'obtiens un message d'erreur disant: "Uncaught TypeError: ce.accessoires de jeu.des photos.la carte n'est pas une fonction". Après une recherche ici sur Stackoverflow, je pense que le problème est que cette.les accessoires sont des objets javascript et pas un tableau. Le problème est que je n'arrive pas à comprendre comment faire un tableau. Quelqu'un peut-il expliquer ce que je fais mal?

Mon code:

class App extends Component {

  constructor() {
  super();
  this.state = {

  }
}

componentDidMount() {

let apiKey = 'xxxxxxxxxxxxxxxxxx';
let searchKeyword = 'nature';
let url = `https://api.flickr.com/services/
           rest/?api_key=${apiKey}&method=flickr.photos.
           search&format=json&nojsoncallback=1&&per_page=50
           &page=1&text=${searchKeyword}`;

fetch(url)
  .then(response => response.json())
  .then(data => data.photos.photo.map((x) => {

    this.setState({
      farm: x.farm,
      id: x.id,
      secret: x.secret,
      server: x.server})
   //console.log(this.state)
  }))
 }

    render() {
      return (
        <div className="App">
          <Header />
          <Main img={this.state.photos} />
          <Navigation />
        </div>
      );
    }
  }

  export default class Main extends Component {

  render() {

    return(
      <main className="main">
        {console.log(this.props.photos)}
      </main>
    )
  }
 }

Edit:
Pourquoi est-ce.accessoires de jeu.img undefined premier?

Capture d'écran de la console.journal(ce.accessoires de jeu.img)

  • qu'est-ce que photo? map est une méthode de Array.
  • "Je reçois une erreur en disant: "Uncaught TypeError: ce.accessoires de jeu.des photos.la carte n'est pas une fonction"' this.props.photos.map ne pas apparaître n'importe où dans votre code de la cité. data.photos.photo.map n', vouliez-vous dire cela?
  • Séparément: Vous appelez map et à l'intérieur de la map rappel, vous appelez setState et ne retourne pas de valeur, si vous êtes à la cartographie de chaque entrée à undefined; vous n'êtes pas à l'aide de la valeur de retour de map à tous (vous êtes de retour, c'est hors de then, mais rien utilise l'résultant de la promesse, il en va non utilisés). Vous avez presque certainement ne voulez pas appeler à plusieurs reprises setState comme ça.
  • L'URL n'ont vraiment mais les sauts de ligne? Cela ne fonctionnerait pas correctement.
InformationsquelleAutor Tose | 2017-06-15
  1. 5
    fetch(url)
  .then(response => response.json())
  .then(data => data.photos.photo.map((x) => {

    this.setState({
      farm: x.farm,
      id: x.id,
      secret: x.secret,
      server: x.server})
  }))

    Ce qui se passe, c'est que votre carte en fonction de votre promesse est la réinitialisation de l'état du composant pour chaque photo qui est retourné. Si votre état sera toujours le dernier objet dans la liste de vos retourné photos.

    Ici est un exemple simplifié de ce que je me réfère à

    const testArray = [1,2,3,4];

let currentState;

testArray.map((value) => currentState = value)

console.log(currentState);

    Ce que vous voulez faire est de cette

    const testArray = [1,2,3,4];

let currentState;

//Notice we are using the return value of the map function itself.
currentState = testArray.map((value) => value)

console.log(currentState);

    Pour ce que vous voulez accomplir, vous voulez que votre état d'être le résultat de la fonction map (depuis que renvoie un tableau des résultats à partir de la carte). Quelque chose comme ceci:

    fetch(url)
  .then(response => response.json())
  .then(data => 
    this.setState({
      photos:
        data.photos.photo.map((x) => ({
          farm: x.farm,
          id: x.id,
          secret: x.secret,
          server: x.server
        }))
     })
   )
    • Merci pour la réponse. Je reçois toujours le message d'erreur "la carte n'est pas une fonction" lorsque j'essaie d'utiliser la méthode map sur cette.des accessoires du composant Principal. Ce que je veux faire est de créer une nouvelle img-tag pour chaque objet de cette.état. <les principaux className="main"> {cette.accessoires de jeu.des photos.carte((x) => { return <img src="ferme{x.ferme}.staticflickr.com/{x.serveur}/{x.id}_{x.secret}.jpg" alt="" /> })} </main>
    • Si vous avez cette console.accessoires de jeu.photos, que fait-il de retour?
    • Une liste d'objets. Le problème est que ce n'est pas un tableau? Objet {0: Objet 1: Objet, 2: Objet, 3: Objet 4: L'Objet, 5: Objet, 6: Objet, 7: Objet, 8: Objet, 9: Objet, 10: Objet, 11: Objet, 12: Objet, 13: Objet, 14: Objet, 15: Objet, 16: Objet, 17: Objet, 18: Objet, 19: Objet, 20: Objet, 21: Objet, 22: Objet, 23: Objet, 24: Objet, 25: Objet, 26: Objet, 27: Objet, 28: Objet, 29: Objet, 30: Objet, 31: Objet, 32: Objet, 33: Objet, 34: Objet, 35: Objet, 36: Objet, 37: Objet, 38: Objet}
    • Creuser dans, elle ressemble à Réagir de l'état doit être un objet. J'ai mis à jour ma solution au bas de refléter cela. Essentiellement, il suffit d'ajouter le tableau dans une propriété et de transmettre cette propriété à votre enfant de composant.
    • J'ai vraiment apprécié toute l'aide et désolé pour toutes les questions. Je reçois toujours le même message d'erreur lorsque vous essayez de carte. Peut-être parce que cette.accessoires de jeu.img en premier lieu n'est pas défini (voir image téléchargée dans le fond de ma première question)? Notez que j'ai changé le nom de la propriété à partir de photos de img.
    • Probablement. La raison pour laquelle il n'est pas défini au premier abord est parce que votre fonction d'extraction est asynchrone. Donc ce qui se passe est que votre Application composant est rendu avant que la fonction d'extraction de finitions. C'est là que votre undefined résultat est à venir à partir de. Une fois l'extraction terminée, il remplit l'état et re-rend votre Application composant. C'est le deuxième journal de la console. Vous pouvez résoudre ce problème de deux façons. 1. définissez le tableau dans votre état pour un tableau vide dans l'Application de la composante constructeur. 2. Mise à jour de votre composant Principal pour gérer une éventuelle valeur non définie dans le présent.accessoires de jeu.img.
    • Il travaille maintenant. Merci pour toute aide 🙂

    InformationsquelleAutor Nick Wyman