react js class poll convert into react hooks poll

限于喜欢 提交于 2021-02-05 09:47:23

问题


this my code for react component "class" base poll but I want to convert this form into react hooks so need help...!I don't understand How can I do this...!please help please help please help please help please help please help please help please help please help please help please help please help please help please help please help please help please help please help

import React, { Component } from "react";
import Poll from "react-polls";

// Declaring poll question and answers
const pollQuestion = "Youtube is the best place to learn ?";
const pollAnswers = [
  { option: "Yes", votes: 7 },
  { option: "No", votes: 2 },
  { option: "don't know", votes: 1 },
];

class Fakepolls extends Component {
  // Setting answers to state to reload the component with each vote
  state = {
    pollAnswers: [...pollAnswers],
  };

  // Handling user vote
  // Increments the votes count of answer when the user votes
  handleVote = (voteAnswer) => {
    const { pollAnswers } = this.state;
    const newPollAnswers = pollAnswers.map((answer) => {
      if (answer.option === voteAnswer) answer.votes++;
      return answer;
    });
    this.setState({
      pollAnswers: newPollAnswers,
    });
  };

  render() {
    const { pollAnswers } = this.state;
    return (
      <div>
        <Poll
          question={pollQuestion}
          answers={pollAnswers}
          onVote={this.handleVote}
        />
      </div>
    );
  }
}
export default Fakepolls;

回答1:


I will, for this answer, assume you are rather asking about how to convert a class-based component to a functional component since there isn't anything really to convert to a custom react hook.

Steps to convert:

  1. Convert state to use the useState React hook.
  2. Replace references of this.state.pollAnswers to pollAnswers.
  3. Replace references to this.setState to setPollAnswers.
  4. Use proper functional state update to not mutate existing state.
  5. Replace reference of this.handleVote to handleVote and declare const.

Code

import React, { useState } from "react";
import Poll from "react-polls";

// Declaring poll question and answers
const pollQuestion = "Youtube is the best place to learn ?";
const answers = [ // <-- renamed to avoid collision with state variable
  { option: "Yes", votes: 7 },
  { option: "No", votes: 2 },
  { option: "don't know", votes: 1 }
];

const Fakepolls = () => {
  // Setting answers to state to reload the component with each vote
  const [pollAnswers, setPollAnswers] = useState([...answers]);

  // Handling user vote
  // Increments the votes count of answer when the user votes
  const handleVote = (voteAnswer) => {
    setPollAnswers((pollAnswers) =>
      pollAnswers.map((answer) =>
        answer.option === voteAnswer
          ? {
              ...answer,
              votes: answer.votes + 1
            }
          : answer
      )
    );
  };

  return (
    <div>
      <Poll
        question={pollQuestion}
        answers={pollAnswers}
        onVote={handleVote}
      />
    </div>
  );
};
export default Fakepolls;



来源:https://stackoverflow.com/questions/65896319/react-js-class-poll-convert-into-react-hooks-poll

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!