react js class poll 转换成 react hooks poll

Question

这是我的 React 组件“class”基础投票代码，但我想将此表单转换为 React 挂钩，因此需要帮助...！我不明白我该怎么做？

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

对于这个答案，我假设您更愿意询问如何将基于 class 的组件转换为功能组件，因为实际上没有任何东西可以转换为自定义反应挂钩。

转换步骤：

转换状态以使用 useState React 钩子。
将 this.state.pollAnswers 的引用替换为 pollAnswers。
将对 this.setState 的引用替换为 setPollAnswers。
使用适当的功能状态更新而不是改变现有状态。
将 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;

react js class poll 转换成 react hooks poll

react js class poll convert into react hooks poll

node.js

express

reactjs

react-native

mern