function Results(props) {
var results = props.results;
return (
<>
<table>
<thead>
<tr>
<th>Book Name</th>
<th>Author</th>
<th>S.no</th>
<th>Series Name</th>
<th>Type</th>
<th>Genre</th>
<th>Kindle/Real</th>
</tr>
</thead>
<tbody>
{results.map(result => {
return (
<tr key={result.name}>
<td>{result.name}</td>
<td>{result.author}</td>
<td>{result.sno}</td>
<td>{result.series}</td>
<td>{result.type}</td>
<td>{result.genre}</td>
<td>{result.kindeReal}</td>
</tr>
);
})}
</tbody>
</table>
</>
);
}
当我尝试渲染上面的com组件时,出现错误:
TypeError:results.map不是函数
results变量是一个对象数组,类似于:
[{"type":1},{"type":0},{"type":2}]
但是,当我使用.map函数时,它将返回错误!显然,它是一个数组,所以为什么我不能使用它?
这是console.log(结果)的输出。
[{"Book_Name":"Time Riders","Author":"Alex Scarrow","S_no":1,"Series_Name":"Time Riders","Fiction_Non_fiction_Companion_Prequel":"Fiction","Genre":"Sci-fi/Mystery/Thriller","Kindle_Real":"Real"},{"Book_Name":"Day of the Predator ","Author":"Alex Scarrow","S_no":2,"Series_Name":"Time Riders","Fiction_Non_fiction_Companion_Prequel":"Fiction","Genre":"Sci-fi/Mystery/Thriller","Kindle_Real":"Real"},{"Book_Name":"The Doomsday Code","Author":"Alex Scarrow","S_no":3,"Series_Name":"Time Riders","Fiction_Non_fiction_Companion_Prequel":"Fiction","Genre":"Sci-fi/Mystery/Thriller","Kindle_Real":"Real"},{"Book_Name":"The Eternal War","Author":"Alex Scarrow","S_no":4,"Series_Name":"Time Riders","Fiction_Non_fiction_Companion_Prequel":"Fiction","Genre":"Sci-fi/Mystery/Thriller","Kindle_Real":"Real"},{"Book_Name":"Gates of Rome","Author":"Alex Scarrow","S_no":5,"Series_Name":"Time Riders","Fiction_Non_fiction_Companion_Prequel":"Fiction","Genre":"Sci-fi/Mystery/Thriller","Kindle_Real":"Real"},{"Book_Name":"City of Shadows","Author":"Alex Scarrow","S_no":6,"Series_Name":"Time Riders","Fiction_Non_fiction_Companion_Prequel":"Fiction","Genre":"Sci-fi/Mystery/Thriller","Kindle_Real":"Real"},{"Book_Name":"The Pirate Kings","Author":"Alex Scarrow","S_no":7,"Series_Name":"Time Riders","Fiction_Non_fiction_Companion_Prequel":"Fiction","Genre":"Sci-fi/Mystery/Thriller","Kindle_Real":"Real"},{"Book_Name":"The Mayan Prophecy","Author":"Alex Scarrow","S_no":8,"Series_Name":"Time Riders","Fiction_Non_fiction_Companion_Prequel":"Fiction","Genre":"Sci-fi/Mystery/Thriller","Kindle_Real":"Real"},{"Book_Name":"The Infinity Cage","Author":"Alex Scarrow","S_no":9,"Series_Name":"Time Riders","Fiction_Non_fiction_Companion_Prequel":"Fiction","Genre":"Sci-fi/Mystery/Thriller","Kindle_Real":"Real"}]
在我看来,这就像一个数组。为什么它不是数组?
这是父组件。
import React from "react";
import Results from "./results";
function ResultsRenderer(props) {
if (props.status === true) {
return <Results results={props.results} />;
} else {
return <>{"No"}</>;
}
}
export default ResultsRenderer;
这是ResultsRenderer的父组件。
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;
让我知道您是否也需要NodeJS。我正在使用SQL来获取数据,这就是为什么我需要NodeJS的原因。抱歉,我的代码有点奇怪。
谢谢!
答案 0 :(得分:0)
功能map()
仅可用于阵列。在这种情况下,props.results
似乎不是数组或尚未设置(如果您使用Axios或类似的东西来获取数据,则会发生这种情况。)
我建议您在函数开始处放置以下内容:
if (!props.results) return 'no data';
if (!Array.isArray(props.results)) return 'results are not array'
您对onreadystatechange
请求的响应通常以JSON或XML形式出现。我认为您的答案是字符串化的json。对于JSON,请尝试使用JSON.parse(response)
;对于XML,请尝试使用(new DOMParser()).parseFromString(response,"text/xml")
。
在您的组件中,可能看起来像这样
request.onreadystatechange = function() {
(this.readyState == 4 && this.status == 200)
&& setAnswer([JSON.parse(this.responseText), true]);
};
答案 1 :(得分:0)
我在访问数组的数据元素时也遇到了同样的错误。这是我所做的:
{standardObj ? (
{standardObj.map((obj: any) => {
return (
<Grid item>
<FormControlLabel
className={styles.CheckboxLabel}
key={obj.Code}
control={
<Checkbox
onChange={handleCheckElement}
name={obj.FullName}
value={obj.Code}
/>
}
label={obj.FullName}
/>
</Grid>
);
})}
) : null }
答案 2 :(得分:0)
我在反序列化一个简单的 .json 文件时看到了类似的行为:
const stringifiedData = fs.readFileSync(animalsPath);
const animalData = JSON.parse(stringifiedData);
const animals = animalData.map(animal => {
return new Animal(animal)
})
奇怪的是,我下面的例子是做一个字符串点表示法,它似乎满足 V8 对象是一个数组,即使它在 console.out 中的输出没有改变。以下确实有效,但我不知道为什么。有什么想法吗?
const stringifiedData = fs.readFileSync(animalsPath);
const animalData = JSON.parse(stringifiedData).animals;
const animals = animalData.map(animal => {
return new Animal(animal)
})
答案 3 :(得分:0)
我遇到了同样的问题,并且似乎对于 useState Hook 来说,初始值的数据类型非常重要,我的初始值是 0 int 并且反应的 cos 无法将更新识别为数组。
>