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组件时，我得到了错误：
类型错误：www.example.com不是函数results.map is not a function
results变量是一个对象数组，类似于：

[{"type":1},{"type":0},{"type":2}]

然而，当我使用. map函数时，它返回错误!它显然是一个数组，为什么我不能使用它？
这是console. log（results）的输出。

[{"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。如果我的代码有点奇怪，请原谅。
先谢了!

函数map()只能在array上使用。在这种情况下，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]);
};

6条答案

按热度按时间

kqhtkvqz1#

赞(0）回复(0）举报 2023-02-08

wmtdaxz32#

在反序列化一个简单的.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)
})

nkoocmlb3#

我也得到了同样的错误，而访问一个数组的数据元素.这里是我做了什么：

{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 }

xqk2d5yq4#

我面临着同样的问题和appars，对于useState挂钩是非常重要的数据类型的初始值，我有作为初始值0 int和cos的React不承认更新为数组.

dy1byipe5#

我是React的新手，发现如果一个变量为空/未定义，并且与“map”函数一起使用，React会引发该异常。我的解决方案是检查变量是否“未定义”和长度〉0。

zf2sa74q6#

大多数情况下，这个问题是由于错误的语法。
哪里有

results.map(result => {
 ........................
 }

只管做

results.map(result => (
 ........................
 )

reactjs 如何修复"类型错误：www.example.com不是React中的函数"results.map is not a function", in React

6条答案

澄清后

相关问题

热门标签

最新问答