react js 类 poll 转换成 react hooks poll

Question

这是我的反应组件“类”基本投票的代码，但我想将此表单转换为反应挂钩，所以需要帮助......！我不明白我该怎么做？

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;

Answer 1

对于这个答案，我假设您想问的是如何将基于类的组件转换为函数式组件，因为没有任何东西可以真正转换为自定义反应钩子。

转换步骤：

1. 转换状态以使用useState React 钩子。
2. 将this.state.pollAnswers 的引用替换为pollAnswers。
3. 将对this.setState 的引用替换为setPollAnswers。
4. 使用适当的功能状态更新不改变现有状态。
5. 将this.handleVote 的引用替换为handleVote 并声明const。

代码

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;