React 钩子有助于从基于类的组件进行重构

Question

我有这个基于类的组件，我正在尝试重构它以使用钩子，但遇到了一些我无法弄清楚的麻烦。 我有一个调查问题组件，它将根据创建的问题类型显示一个保管框、复选框等。 但是，当有新问题时，我似乎无法弄清楚在哪里可以重新初始化基础值。 任何帮助将不胜感激。 我只显示复选框组件功能。

const CheckboxButton = ({ onClick, checked, label }) => {
return (
<TouchableOpacity
style={checkboxStyles.wrapper}
activeOpacity={1}
onPress={() => {
if (typeof onClick === 'function') {
onClick(!checked);
}
}}
>
<View
style={[
checkboxStyles.checkbox,
checked ? checkboxStyles.checkboxChecked : null
]}
>
{checked ? <View style={checkboxStyles.checkboxCheckedDot} /> : null}
</View>
<Text style={checkboxStyles.label}>{label}</Text>
</TouchableOpacity>
);
};
const QuestionCheckboxes = ({ question, onChange }) => {
const [checkedIndex, setCheckedIndex] = useState([]);
const _onChange = checked => {
const options = question.options;
let values = [];
for (let i in checked) {
if (checked[i]) {
values.push(options[i]);
}
}
if (typeof onChange === 'function') {
onChange(values.length ? values : null);
}
};
let items = [];
for (let i = 0; i < question.options.length; ++i) {
const option = question.options[i];
items.push(
<CheckboxButton
key={i}
label={option}
checked={checkedIndex[i]}
onClick={value => {
let newCheckedIndex = [...checkedIndex];
newCheckedIndex[i] = value;
setCheckedIndex(newCheckedIndex);
//need to use newCheckedIndex for onChange b/c checked index has been set
_onChange(newCheckedIndex);
}}
/>
);
}
return <View>{items}</View>;
};
const QuestionView = ({ index, question, onChange }) => {
const questionComponents = {
dropdown: QuestionDropdown,
radios: QuestionRadios,
checkboxes: QuestionCheckboxes,
stars: QuestionStars
};
if (typeof questionComponents[question.type] !== 'function') {
return null;
}
const QuestionComponent = questionComponents[question.type];
return (
<View>
<Text style={styles.questionTitle}>
{index}. {question.title}
</Text>
<View style={styles.questionComponent}>
<QuestionComponent question={question} onChange={onChange} />
</View>
</View>
);
};
const SurveyQuestion = ({ navigation }) => {
const [survey, setSurvey] = useState(navigation.getParam('item'));
const questionsCount = survey.entity.data.length;
const [current, setCurrent] = useState(0);
const [index, setIndex] = useState(1);
const [progress, setProgress] = useState(index / questionsCount);
const [answers, setAnswers] = useState([]);
_nextQuestion = async () => {
setProgress(index / questionsCount);
if (typeof answers[current] === 'undefined' || answers[current] === null) {
// GeneralActions.notify('Please answer this question.');
console.log('did not answer question');
return;
}
if (current === survey.entity.data.length - 1) {
console.log('getting ready to send to server');
try {
const response = await axios.post('/request', {
id: survey.id,
key: null,
data: answers
});
} catch (err) {
console.log('error posting survey: ', err);
}
return null;
}
setCurrent(current + 1);
setIndex(index + 1);
};
return (
<ScrollView style={styles.container}>
<View style={styles.container}>
<View style={styles.questions}>
<View style={styles.progressbar}>
<ProgressBar
progress={progress}
width={null}
height={20}
borderRadius={10}
borderWidth={0}
unfilledColor='#f5f5f5'
/>
</View>
<Text style={styles.questionsInfo}>
{index} / {questionsCount}
</Text>
</View>
<View style={styles.questionWrapper}>
<QuestionView
index={index}
question={survey.entity.data[current]}
onChange={value => {
let newAnswers = answers.slice();
newAnswers[current] = value;
setAnswers(newAnswers);
}}
/>
</View>
<View style={styles.action}>
<TouchableOpacity
style={styles.buttonPrimary}
activeOpacity={0.7}
onPress={_nextQuestion}
>
<Text style={styles.button}>
{progress === 1 ? 'FINISH' : 'NEXT'}
</Text>
</TouchableOpacity>
</View>
</View>
</ScrollView>
);
};

目前，当我从一个问题转移到另一个问题时，旧的答案将延续下来。 例如，我不知道在哪里可以将检查的索引重新初始化回 []。

const [checkedIndex， setCheckedIndex] = useState([](;

我尝试将setCheckedIndex([](放在几个区域，并且得到了太多的重新渲染。

Answer 1

这可能是因为它在每个渲染之间重用了相同的QuestionComponent组件。我无法测试它，但我会尝试添加一个唯一的键来向 React 提供"提示"，即每当键更改时，它都应该创建一个新组件。

<QuestionComponent
key={question.uniqueIdOrSomething}
question={question}
onChange={onChange}
/>;

其中uniqueIdOrSomething可以是问题id或问题text(任何可以唯一标识问题的内容(。

通常，key用于列表中，因此 React 可以在顺序更改时重用组件(性能优化(。但是，它也可以用来告诉 React 这个组件是不同的，它不应该重用现有组件并重新实例化它。对于您来说，这将擦除现有状态并为您提供新的默认值。我认为这是使用key的正确用例，但要小心过度使用这种方法(添加key道具(，因为它可能会掩盖其他问题。

有关key属性的更多详细信息：https://reactjs.org/docs/lists-and-keys.html