react本地选项卡视图渲染api呼叫后

Question

我正在使用Tab View React本机库来构建用户帐户屏幕。我的请求很简单，如何在获取用户数据的API调用后更新选项卡视图内容？

function UserStoreScreen({ navigation, route }) {
  const layout = useWindowDimensions();
  const [index, setIndex] = React.useState(0);
  const [userStore, setUserStore] = React.useState({});
  const [routes] = React.useState([
    { key: "first", title: "Dressing" },
    { key: "second", title: "À propos" },
  ]);
  const user = route.params;

  // renders undefined 
  const FirstRoute = () => (
    <>
      <View style={styles.userContainer}>
        <ListItem
          image={`${IMAGES_BASE_URL}${userStore.photo}`}
          title={`${userStore.username}`}
          subTitle={`${userStore.store.length} Articles`}
        />
      </View>
    </>
  );

  const SecondRoute = () => (
    <>
      <View style={{ flex: 1, backgroundColor: "#ff4081" }} />
    </>
  );

  const renderScene = SceneMap({
    first: FirstRoute,
    second: SecondRoute,
  });

  const getUser = async () => {
    await axiosApi
      .post("/getUserProducts", { user_id: user.user_id })
      .then((response) => {
       // didn't work since set state is async 
        setUserStore(response.data);
        
      })
      .catch((err) => {
        console.log(err);
      });
  };
  // Get store products
  useEffect(() => {
    getUser();
  }, []);

  return (
    <Screen style={styles.screen}>
      <TabView
        navigationState={{ index, routes }}
        renderScene={renderScene}
        onIndexChange={setIndex}
        initialLayout={{ width: layout.width }}
      />
    </Screen>
  );
}

在接收API调用数据后，有没有办法使TAB视图的内容更新？

Answer 1

是的，有一种有力重新安装组件的方法。为此，我们可以使用键 prop类似：

return (
    <Screen style={styles.screen}>
      <TabView
        key={JSON.stringify(userStore)}
        navigationState={{ index, routes }}
        renderScene={renderScene}
        onIndexChange={setIndex}
        initialLayout={{ width: layout.width }}
      />
    </Screen>
  );

键 props如何工作？每当组件重新渲染时，它将检查键值是否相同。如果不是相同的，请迫使组件重新渲染。

在这种情况下，我们将始终检查userstore值是否已更改。