如何在不更改状态的情况下重新渲染组件

Question

我有一个先获取数据的组件。然后我操作数据，但它不会改变值，直到我更改屏幕并返回。在这里，我根据我使用redux获取的类别和医生来更改数据。但是转换后的数据保持为空，直到我第二次返回页面。感谢您的帮助

import React, { useState, useEffect, useCallback } from "react";
import {
View,
Text,
StyleSheet,
ActivityIndicator,
FlatList,
Dimensions,
} from "react-native";
import { useSelector, useDispatch } from "react-redux";
import Colors from "../../constants/Colors";
import * as DoctorsActions from "../../store/actions/Doctors";
const { height } = Dimensions.get("window");
const ConcultationMainScreen = (props) => {
const dispatch = useDispatch();
const [isLoading, setIsLoading] = useState(false);
const [error, setError] = useState("");
const categories = useSelector((state) => state.categories.categories);
const doctors = useSelector((state) => state.doctors.doctors);
const loadAllDoctors = useCallback(async () => {
try {
await dispatch(DoctorsActions.getDoctors());
} catch (err) {
setError(err);
console.log(error);
}
}, [dispatch, setError]);
useEffect(() => {
setIsLoading(true);
loadAllDoctors().then(() => {
setIsLoading(false);
});
}, [dispatch, loadAllDoctors]);
if (isLoading) {
return (
<View style={styles.centered}>
<ActivityIndicator size="large" color={Colors.blue} />
</View>
);
}
let transformedData = [];
for (const cat in categories) {
let doctorsOfCategory = [];
for (const doc in doctors) {
if (doctors[doc].categories[0] === categories[cat].name) {
doctorsOfCategory.push({
doctorName: doctors[doc].name,
});
} else {
continue;
}
}
transformedData.push({
categoryName: categories[cat].name,
doctorsOfCategory: doctorsOfCategory,
});
}
console.log(transformedData);
const renderConsultCategories = (ItemData) => {
return (
<View style={styles.item}>
<View style={styles.titleContainer}>
<Text>
گفتگو و مشاوره با متخصصین <Text>{ItemData.item.categoryName}</Text>
</Text>
</View>
</View>
);
};
return (
<View style={styles.screen}>
<FlatList
data={transformedData}
keyExtractor={(item) => item.categoryName}
renderItem={renderConsultCategories}
/>
</View>
);
};
export const screenOptions = (navData) => {
return {
headerTitle: "صفحه مشاوره",
headerTitleAlign: "center",
};
};
const styles = StyleSheet.create({
screen: {
flex: 1,
},
centered: {
flex: 1,
justifyContent: "center",
alignItems: "center",
},
item: {
flexDirection: "row-reverse",
width: "100%",
height: height / 8,
marginVertical: 10,
borderBottomWidth: 1,
},
});
export default ConcultationMainScreen;

Answer 1

使用this.forceUpdate()重新渲染，而不调用setState((。