React Native 如何在更改某些属性后强制重新加载或刷新组件

pdtvr36n  于 2022-11-17  发布在  React
关注(0)|答案(1)|浏览(485)

我有以下组件:

import { useBodyCreateUser } from "../jotai/bodyCreateUser";

const Header = ({
  noVerify,
  name,
  processed,
  OnProcessed,

}: any) => (
  <View style={styles.container}>
    <View style={styles.controls}>
      <HorizontalSpacer />
      <Text style={{ ...styles.textForm }}>NAME</Text>
      <Text style={styles.textInput}>{name}</Text>

      {noVerify ? (
        <View style={{ width: "100%" }}>
          
          {processed == false && (
            <GreenButtonText onPress={OnProcessed}>
              <Text style={stylesButtons.text}>Set to Processed</Text>
            </GreenButtonText>
          )}

        </View>
      ) : (
        <View style={{ width: "100%", paddingTop: "45%" }}>
          // ** other code here ** //
        </View>
      )}

  </View>
);

export default function Settings({ navigation }: RootTabScreenProps<any>) {

const [getBody, setBodyCreateUser] = useBodyCreateUser();
const [verify, setVerify] = React.useState(false);

return (

 <SafeAreaView style={styles.container}>

<Header
            noVerify={verify}
            name={name}
            
            processed={getBody.processed}
            OnProcessed={() => {
             
                  getBody.processed = true;
                  setBodyCreateUser(getBody);
                  // update local storage
                  AsyncStorage.setItem("appstate", JSON.stringify(getBody));
              
            }} 
           
          />

 </SafeAreaView>

);

};
当我点击按钮“设置为已处理”时,我需要隐藏该按钮。当我将其设置为已处理后返回到上一屏幕,然后再次将其输入到视图中时,该按钮可以工作。但在同一视图中,当OnProcessed事件发生时,该按钮仍然存在吗?
我不知道是否有办法重新加载或刷新Header组件,但我认为只需将属性processed设置为true即可反映更改,但事实并非如此。
有线索吗?

nbnkbykc

nbnkbykc1#

请尝试以下解决方法:

import { useBodyCreateUser } from "../jotai/bodyCreateUser";

const Header = ({
  noVerify,
  name,
  processed,
  OnProcessed,
  refresh,

}: any) => (
  <View style={styles.container}>
    <View style={styles.controls}>
      <HorizontalSpacer />
      <Text style={{ ...styles.textForm }}>NAME</Text>
      <Text style={styles.textInput}>{name}</Text>

      {noVerify ? (
        <View style={{ width: "100%" }}>
          
          {processed == false && !refresh && (
            <GreenButtonText onPress={OnProcessed}>
              <Text style={stylesButtons.text}>Set to Processed</Text>
            </GreenButtonText>
          )}

        </View>
      ) : (
        <View style={{ width: "100%", paddingTop: "45%" }}>
          // ** other code here ** //
        </View>
      )}

  </View>
);

export default function Settings({ navigation }: RootTabScreenProps<any>) {

const [getBody, setBodyCreateUser] = useBodyCreateUser();
const [verify, setVerify] = React.useState(false);
const [refresh, setRefresh] = React.useState(false);

return (

 <SafeAreaView style={styles.container}>

<Header
            noVerify={verify}
            name={name}
            
            processed={getBody.processed}
            refresh={refresh}
            OnProcessed={() => {
             
                  getBody.processed = true;
                  setBodyCreateUser(getBody);
                  // update local storage
                  AsyncStorage.setItem("appstate", JSON.stringify(getBody));
                  setRefresh(true);
              
            }} 
           
          />

 </SafeAreaView>

);

我认为,因为您试图侦听对象内部已更改的数据,所以组件不会重新呈现,因为主对象没有更改。
因此,我添加了“刷新”状态以确保组件重新呈现。

相关问题