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

使用for (int i = 0; i < row; i++) { for (int j = 0; j < col.length(); j++) { if (charArray[i][j] != '') { text.append(charArray[i][j]); } } this.newText = text.toString();重新渲染而无需调用setState（）。

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

1 个答案: