在反应轮询中从API提取数据

问题描述

我想从API提取数据并使用react显示前端，但我从前端收到错误，这是(TypeError:answers.map不是一个函数)，那么我该如何解决此错误-

I want to fetch data from API and show frontend using react but I am getting error from frontend side which is (TypeError: answers.map is not a function ) so how can I solve this error --

我的密码是-

import React, { useState, useEffect } from "react";
import Poll from "react-polls";
import { getPolls } from "../helper/coreapicalls";

const MainPoll = () => {
  const [polls, setPoll] = useState([]);
  const [error, seterror] = useState(false);
  // Setting answers to state to reload the component with each vote
  const [pollAnswers, setPollAnswers] = useState([]);

  useEffect(() => {
    loadPoll();
  }, []);

  const loadPoll = () => {
    getPolls().then((data) => {
      if (data.error) {
        seterror(data.error);
      } else {
        setPoll(data);
        console.log(data);
      }
    });
  };

  // Handling user vote
  // Increments the votes count of answer when the user votes
  const handalchange = () => {
    console.log("hello");
  };

  return (
    <div className="">
      <div className="container">
        <h1 className="blog_heading">Poll's of the Day</h1>
        <div className="row">
          {polls.map((poll, index) => (
            <div className="col-lg-4 col-12" key={index}>
              <Poll
                question={poll.question}
                answers={poll.options.none}
                onVote={handalchange}
              />
            </div>
          ))}
        </div>
      </div>
    </div>
  );
};

export default MainPoll;

我从API获得的数据是-在这里，我有个Question，三个如何显示到前端的选项

Data which I am getting from API is-Here I have Question , 3 options how can I show to frontend

错误-

推荐答案

向您展示的代码中有两个小错误:

There is two little mistakes in the code that you show us:

1. 您从/polls'; 导入 import Polls的第一个，然后调用< Poll noStorage question = {poll.question} answers = {poll.options} onVote= {handleVote}/> 只需按投票更改投票.
2. const [pollAnswers，setPollAnswers] = useState([... answers]); 无效，因为您需要为状态和 answer传递初始值尚未初始化且无法访问.只需通过 useState([]);
更改 useState([... answers]); 更新:
您需要传递一个数组来回答道具.我们可以在您的控制台屏幕截图中看到，该选项数组具有"none"(无)选项.作为关键尝试以下操作:<投票否存储问题= {poll.question}答案= {poll.options.none} onVote = {handleVote}/> ("none"是一个奇怪的钥匙...)
更新
您的数据对象格式不正确，无法适应react-polls Answers道具.在反应轮询的npmjs文档中，我们可以看到一个选项示例，它是一个像这样的对象数组:


1. the first One you imported import Polls from "./polls"; and you call <Poll noStorage question={poll.question} answers={poll.options} onVote={handleVote}/> just change Poll by Polls.
2. const [pollAnswers, setPollAnswers] = useState([...answers]); this didn't work because you need to pass a initial value for your state and answer is not yet initialize and accessible. just change useState([...answers]); by useState([]);
UPDATE:
you need to pass an array to answers props .We can see in your console screenshot that the array of options has "none" as key sotry this : <Poll noStorage question={poll.question} answers={poll.options.none} onVote={handleVote}/> ("none" is a strange key...)
UPDATE
Your data object is not well formated to fit react-polls answers props.in the npmjs doc of react-polls we can see an example of options and it's an array of object like this:


[
  { option: 'Yes', votes: 8 },
  { option: 'No', votes: 2 }
]

因此，根据您在问题中添加的数据控制台日志，它应如下所示:

so based on the data console log that you add in your question it should looks like this:

[
  {
    createdAt: "2020-12-01T21:43:23:21.061Z",
    options: {
      none: [ { option: 'Yes', votes: 8 },
      { option: 'No', votes: 2 }],
      student: ["12345678978945"],
      teacher: ["7894567894231"]
    },
    question: "Are you student ot teacher",
    updatedAt: "2020-12-01T21:43:23:21.061Z"
  }
]

请参见沙盒在这里使用您的代码(getPolls()除外).我认为问题出在API.

see a sandBox here working with your code (except getPolls()).I think the issue come from the API.

这篇关于在反应轮询中从API提取数据的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！