javascript 如何在每次访问页面/屏幕时触发componentDidMount()或useEffect Hook?

mec1mxoz  于 2023-02-18  发布在  Java
关注(0)|答案(8)|浏览(173)

我有一个带Activity的应用。该应用在开始时会检查互联网连接。如果没有互联网连接,它会显示一个带有按钮的屏幕来刷新页面。问题是我的API调用(Axios)位于componentDidMount()上,在第一次渲染后它只被调用一次。有什么方法可以重新加载页面,让它再次调用componentDidMount吗?
我的意思是像全面刷新。我正在使用世博会顺便说一句。任何帮助是赞赏。对不起,没有例子,我只是想得到的想法,如果可能的话

s4chpxco

s4chpxco1#

您可以强制更新组件。请检查以下内容:https://reactjs.org/docs/react-component.html#forceupdate
它将重新呈现组件。
检查此示例:

class App extends Component{
  constructor(){
    super();
        this.forceUpdateHandler = this.forceUpdateHandler.bind(this);
  };

  forceUpdateHandler(){
    this.forceUpdate();
  };

  render(){
    return(
      <div>
          <button onClick= {this.forceUpdateHandler} >FORCE UPDATE</button>
            <h4>Random Number : { Math.random() }</h4>
          </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('app'));
nimxete2

nimxete22#

我建议你把你的API调用放在你的组件中它自己的函数fetchData中。fetchData也可以在成功提取后setState,这将导致重新呈现并显示新鲜的数据。如果你想在componentDidMount上提取新鲜的数据,也可以在按钮点击时,然后创建一个fetchData函数并从componentDidMount中调用它。然后为您的按钮设置适当的onPress属性onPress={this.fetchData}

3okqufwl

3okqufwl3#

class MyScreen extends Component {
    constructor(props) {
        super(props)
        this.state = {
            lastRefresh: Date(Date.now()).toString(),
        }
        this.refreshScreen = this.refreshScreen.bind(this)
    }

    refreshScreen() {
        this.setState({ lastRefresh: Date(Date.now()).toString() })
    }

    render() {
        return (
            <View>
                <Text>My Screen</Text>
                <Text>Last Refresh: {this.state.lastRefresh}</Text>
                <Button onPress={this.refreshScreen} title="Refresh Screen" />
            </View>
        )
    }
}

// also put in main View Date(Date.now())
kgqe7b3p

kgqe7b3p4#

请记住,通过调用组件上的setState函数,您可以刷新它。如果有一个按钮将刷新页面,我会这样做:

<Button  onPress={() => this.setState({dummy: 1})} />

调用setState将更新您的组件,无论您传递给它的对象是什么。我不确定重新呈现页面是否调用componentDidMount函数,因此可能您需要将API调用移动到某个函数func,并在componentDidMount中调用此函数,并且在每个按钮按下事件后调用此函数。示例:

componentDidMount() {
  apiCalls()
}

apiCalls() {
   .... // your code
   this.setState({dummy: 1})
}

render() {
  <View>
    ...
    <Button  onPress={this.apiCalls.bind(this)} />
    ...

  </View>
}
2wnc66cl

2wnc66cl5#

我使用的是Functional component,并执行了以下操作。我在useEffect中使用了一个状态作为依赖项,并在按下按钮时更改了该状态。

const [internetCheck, setInternetCheck] = useState(0);
useEffect(() => {
  //code
}, [internetcheck]);

return(
  <Button title='Retry' onPress(() => setInternetCheck(internetCheck + 1)) />
)
7y4bm7vi

7y4bm7vi6#

根据这个问题的浏览量,很多人都被重定向到这里,就像我一样。所以,我的答案可能不相关,但它肯定会帮助一些人。
为了重新呈现屏幕,我使用了@react-navigation/native中的useIsFocused钩子

useEffect(() => {
    if (isFocused){
        console.log("Assi Gai Badal");
        //Update the state, it will cause a re-render
    }
}, [isFocused]);

通过使用withNavigationFocus高阶组件,可以在基于类的组件中使用它。这个HOC Package 了所需的Component类,并将isFocused属性传递给它。

7rtdyuoh

7rtdyuoh7#

您可以通过在功能组件中执行以下操作来刷新React Native或Expo应用。

步骤1

const [refreshPage, setRefreshPage] = useState("");

第2步然后将其用于您要使用的任何组件并刷新页面,例如警报

Alert.alert(
                    "End of News",
                  "You have read all latest news for today ",
                  [
                    {
                      text: "Refresh Page",
                      onPress: () => {
                        setRefreshPage("refresh");
                        
                      },
                    },
                  ],
                  { cancelable: false }
                );

它会带来警报,当用户点击刷新页面按钮时,页面会被刷新。

o3imoua4

o3imoua48#

我也陷入了同样的问题,然后我想通了,你只需要钩子或useState来解决刷新问题。在我的情况下,刷新随机甲板

const [random1, setRandom1] = useState(
    Math.floor(Math.random() * deck.length) + 1
    );

    <Image source={deck[random1]} style={styles.img} />

    <Button
    title="Refresh?"
    onPress={() => {
      setRandom1(Math.floor(Math.random() * deck.length) + 1);
    }} />

我希望这能有所帮助。

相关问题