如何解决点击两次反应渲染
因此,我和我的同事正在编写一个React / ServiceNow项目,供我们公司内部使用。 我正在使用reducer挂钩来管理整个应用程序的状态。我有以下结构的App组件,它们调用API(带有问题及其相应答案的数组)。此信息被传递到TrainingMode并返回
return
(
<QuizContext.Provider value={{ state,dispatch }}>
<div className='container'>
<Progress />
{'Training'}
<Question />
{renderError()}
<Answers />
<button className='btn btn-primary' onClick={next}>
Confirm and Continue
</button>
</div>
</QuizContext.Provider>
);
答案:
function Answers() {
const { state,dispatch } = useContext(QuizContext);
const { currentAnswer,currentQuestion,questions } = state;
const question = questions[currentQuestion].question;
const answers = questions[currentQuestion].answers;
console.log('curr ans is ' + question);
console.log(answers);
let firstLetter = 65;
const ans = answers.map((el) => {
return (
<Answer
key={el.sys_id}
letter={(firstLetter++).toString()}
answer={el.answer_text}
answer_sysId={el.sys_id}
selected={currentAnswer === el.sys_id}
dispatch={dispatch}
/>
);
});
return <>{ans}</>;
个人答案:
function Answer(props) {
let classes = ['answer'];
const handleClick = (e) => {
props.dispatch({
type: SET_CURRENT_ANSWER,currentAnswer: props.answer_sysId
});
props.dispatch({ type: SET_ERROR,error: '' });
};
if (props.selected) {
classes.push('selected');
}
return (
<button
value={props.answer}
className={classes.join(' ')}
onClick={handleClick}
>
<span>{String.fromCharCode(props.letter)}.</span> {props.answer}
</button>
);
}
最后,是减速器:
function quizReducer(state,action) {
switch (action.type) {
case SET_CURRENT_ANSWER:
console.log(action);
state.currentAnswer.push(action.currentAnswer);
return {
...state
// currentAnswer: action.currentAnswer
};
case SET_CURRENT_QUESTION:
return {
...state,currentQuestion: action.currentQuestion
};
case SET_ERROR:
return {
...state,error: action.error
};
case SET_SHOW_RESULTS:
return {
...state,showResults: action.showResults
};
case SET_ANSWERS:
return {
...state,answers: action.answers
};
case ADD_CORRECT:
return {
...state,correct: action.correct
};
case RESET_QUIZ:
return {
...state,answers: [],currentQuestion: 0,currentAnswer: '',showResults: false,error: '',correct: 0
};
default:
return state;
}
我想单击每个答案并将其推送到currentAnswer数组(因此它适用于单选题和多选题)。这种工作方式可以将我单击的第一个答案推送一次,但是,当我单击其他答案时,会将它们推送两次。当我注释掉“严格”模式标记时,一切正常,但是我怀疑这是最好的解决方案。 console log
我已经阅读了一些文章,但似乎无法解决此问题。
解决方法
Ciao,您知道呈现组件时,会触发触发器useEffect
钩子。因此,您可以尝试将日志记录在此钩子中。像这样:
import { useEffect } from 'react';
...
useEffect(() => {
console.log('curr ans is ' + question);
console.log(answers);
})
如果日志出现两次,则Answer
组件将呈现两次。否则不行。
现在是一个问题:为什么您看到日志翻倍?我的答案是我不知道。可能与react工作流程有关,但这只是我的看法(我不是React的专家)。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。