更改某些属性后如何强制组件重新加载或刷新答案

【问题标题】：How to force a component to reload or refresh after changing some properties更改某些属性后如何强制组件重新加载或刷新
【发布时间】：2022-11-14 04:37:12
【问题描述】：

我有以下组件：

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 事件发生时，按钮还在那里吗？

我不知道是否有办法重新加载或刷新标题组件，但我认为只需将属性 processed 设置为 true 即可反映更改，但不是。

有什么线索吗？

【问题讨论】：

这回答了你的问题了吗？ How can I force a component to re-render with hooks in React?
是的，这似乎是答案，但我不知道如何在我的代码中实现。请帮忙：）

标签： react-native

【解决方案1】：

试试这个解决方法：

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>

);

我认为因为您正在尝试侦听对象内部已更改的数据，所以组件不会重新渲染，因为主对象没有更改。

所以我添加了“刷新”状态以确保组件重新渲染。

【讨论】：