0
votes

Comment corriger "typeError: résultats.map n'est pas une fonction", dans réagir

import React, { useState } from "react";
import { useEffect } from "react";
import "bootstrap/dist/css/bootstrap.min.css";
import Form from "./searcherFormDumb";
import { toast } from "react-toastify";
import ResultsRenderer from "./resultsRenderer";

function Searcher() {
  const [answer, setAnswer] = useState(["Empty", false]);
  const [book, setBook] = useState({
    name: "",
    author: "",
    sno: null,
    series: "",
    type: "",
    genre: "",
    kindleReal: ""
  });
  const defaultState = {
    name: "",
    author: "",
    sno: null,
    series: "",
    type: "",
    genre: "",
    kindleReal: ""
  };

  function handleChange(event) {
    const updatedBook = { ...book, [event.target.name]: event.target.value };
    setBook(updatedBook);
  }

  function handleSubmit(event) {
    event.preventDefault();
    var changed = {};
    function populateChanged(now, old, title, temp) {
      if (now !== old) {
        temp[title] = now;
        return temp;
      } else {
        return temp;
      }
    }
    changed = populateChanged(
      book.name,
      defaultState.name,
      "Book_Name",
      changed
    );
    changed = populateChanged(
      book.author,
      defaultState.author,
      "Author",
      changed
    );
    changed = populateChanged(book.sno, defaultState.sno, "S_no", changed);
    changed = populateChanged(
      book.series,
      defaultState.series,
      "Series_Name",
      changed
    );
    changed = populateChanged(
      book.type,
      defaultState.type,
      "Fiction_Non_fiction_Companion_Prequel",
      changed
    );
    changed = populateChanged(book.genre, defaultState.genre, "Genre", changed);
    changed = populateChanged(
      book.kindleReal,
      defaultState.kindleReal,
      "Kindle_Real",
      changed
    );
    var temp_string = "";
    var key = "";
    var value = "";
    var temp_string_list = [];
    //debugger;
    for (var i = 0; i < Object.keys(changed).length; i++) {
      //debugger;
      key = Object.keys(changed)[i];
      value = changed[key];
      if (i !== Object.keys(changed).length - 1) {
        temp_string = `${key} = "${value}" AND `;
      } else if (i === Object.keys(changed).length - 1) {
        temp_string = `${key} = "${value}"`;
      }
      temp_string_list.push(temp_string);
      //debugger;
      temp_string = "";
      key = "";
      value = "";
    }

    var sql_t = temp_string_list.join("");
    var sql_tt = "SELECT * FROM books_catalouge WHERE ";
    var sql = sql_tt + sql_t;
    toast.success(sql);

    var request = new XMLHttpRequest();
    var jsql = JSON.stringify(sql);
    request.onreadystatechange = function() {
      //debugger;
      if (this.readyState == 4 && this.status == 200) {
        setAnswer([this.responseText, true]);
        console.log(`${answer}`);
      }
    };
    request.open(
      "GET",
      "http://localhost:3001/retrieve_books" + "?msg=" + jsql,
      true
    );
    request.send(jsql);
    console.log("This is the END");
    console.log(`${answer}`);
  }

  return (
    <>
      <Form book={book} onChange={handleChange} onSubmit={handleSubmit} />
      <br />
      <ResultsRenderer status={answer[1]} results={answer[0]} />
    </>
  );
}

export default Searcher;

8 commentaires

sonne comme la première fois qu'elle charge qu'il n'y a pas de données .... console.log ("je suis", résultats); et voir ce qu'il est


Vous voudrez peut-être vérifier que apps.results contient le tableau que vous pensez qu'il fait. Peut-être utiliser un console.log pour vérifier.


résultats est passé dans cette fonction?


@JDN ... regarde le code


Veuillez consoler.log (ProPs.Results) en première ligne et ajouter le résultat à la question.


Vous utilisez probablement dans le composant parent. Tout ce que vous avez à faire pour résoudre ce problème est de vous assurer que ceci.state.x est toujours un tableau, c'est-à-dire que [] .


Essayer la journalisation typeof résultats , ma suspicion est que c'est une chaîne au lieu d'un tableau


@Ferrybig Ouais, c'était une corde. Merci pour la suggestion de débogage. J'ai consolé de le connecter, et cela ressemblait à un tableau, alors je l'ai laissé à cela. Je vais essayer typeof si je fais attention à un problème similaire.


3 Réponses :


3
votes

fonction mappe () ne peut être utilisé que sur tableau . Dans cette situation, il ressemble à apps.results n'est pas un tableau ou n'a pas été défini (cela peut se produire si vous recherchez des données avec Axios ou quelque chose comme ça).

Je vous recommanderais de vous recommander de Placez quelque chose comme celui-ci au début de la fonction: xxx


après clarification

Vous obtenez une réponse sur votre OnreadyStatechange demande que Usualy vient en Json ou XML. Je pense que votre réponse est stringifiée JSON. Essayez d'utiliser json.parse (réponse) dans le cas de JSON ou (nouveau Domparser ()). ParseFromstring (réponse, "Texte / XML") En cas de XML.

dans votre composant, il peut ressembler à ce xxx


8 commentaires

Il revient, les résultats ne sont pas un tableau ».


Donc ... Vos résultats ne sont pas un tableau et une fonction mapper est uniquement pour les tableaux. Pouvez-vous le jeter avec console.log () et poster ce qui a été imprimé?


Fait. Cela ressemble à un tableau, pour une raison quelconque.


Êtes-vous sûr que l'erreur est lancée dans ce composant / code? J'ai testé vos vidages variables et oui, ils sont un tableau (utilisé la même fonction que j'ai mentionnée dans Ma réponse donc si la valeur est la même, elle ne dit pas que ce n'est pas un tableau). Un autre problème possible pourrait être si vous utilisez certains async ou prometteur fonction (encore une fois, cela peut être axios ou aller chercher également). Pouvez-vous me montrer le composant parent où est-ce que celui-ci est rendu?


Sûr. Donne moi une seconde


Fait. J'ai ajouté les composants parents.


J'ai trouvé une possibilité qui pourrait causer cela. Vérifiez ma réponse mise à jour. Objet JSON dans Console.Log a l'air très similaire à l'objet JavaScript.


Ça marche! Merci. Désolé pour l'accusé de réception tardive. Je n'ai pas eu la chance de continuer sur mon application jusqu'à maintenant. C'était une chaîne (j'ai vérifié avec type def), mais votre solution est corrigée! Merci encore.



0
votes

J'ai aussi eu la même erreur tout en accédant à l'élément de données d'un tableau. Voici ce que j'ai fait: xxx


0 commentaires

0
votes

Je vois un comportement similaire lors de la désérialisation d'un simple fichier .json: xxx

curly, l'exemple que je suis suivant est de faire une notation de points à cordes qui semble satisfaire à V8 que l'objet est un tableau, même s'il est sorti dans la console.out ne change pas. Ce qui suit fonctionne, mais je ne sais pas pourquoi. Des idées? xxx


0 commentaires