问题
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:
- Convert state to use the
useState
React hook. - Replace references of
this.state.pollAnswers
topollAnswers
. - Replace references to
this.setState
tosetPollAnswers
. - Use proper functional state update to not mutate existing state.
- Replace reference of
this.handleVote
tohandleVote
and declareconst
.
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