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;
3 Réponses :
fonction Je vous recommanderais de vous recommander de Placez quelque chose comme celui-ci au début de la fonction: p> Vous obtenez une réponse sur votre dans votre composant, il peut ressembler à ce p> mappe () code> ne peut être utilisé que sur
apps.results code> 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).
après clarification h3>
OnreadyStatechange Code> 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) code> dans le cas de JSON ou
(nouveau Domparser ()). ParseFromstring (réponse, "Texte / XML") CODE> En cas de XML. p>
Il revient, les résultats ne sont pas un tableau ».
Donc ... Vos résultats ne sont pas un tableau et une fonction mapper code> est uniquement pour les tableaux. Pouvez-vous le jeter avec
console.log () code> 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 code> ou
prometteur code> 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.
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:
Je vois un comportement similaire lors de la désérialisation d'un simple fichier .json: 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? P>
sonne comme la première fois qu'elle charge qu'il n'y a pas de données ....
console.log ("je suis", résultats); code> et voir ce qu'il est
Vous voudrez peut-être vérifier que
apps.results code> contient le tableau que vous pensez qu'il fait. Peut-être utiliser un
console.log code> pour vérifier.
Où
résultats code> 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 code> dans le composant parent. Tout ce que vous avez à faire pour résoudre ce problème est de vous assurer que
ceci.state.x code> est toujours i> un tableau, c'est-à-dire que
[] code> .
Essayer la journalisation
typeof résultats code>, 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 code> si je fais attention à un problème similaire.