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

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;

标签： reactjsreact-nativereact-redux

Answer 1

用于this.forceUpdate()在不调用 setState() 的情况下重新渲染。