在React中如何修复“ TypeError:results.map不是一个函数”

时间:2019-10-11 14:43:23

标签: javascript arrays reactjs object array.prototype.map

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的原因。抱歉,我的代码有点奇怪。

谢谢!

4 个答案:

答案 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 无法将更新识别为数组。

>