如何在点击goBack()时更新前一个屏幕的useState值并刷新屏幕。

huangapple go评论46阅读模式
英文:

How to update the previous Screen's useState value and refresh the screen on click of goBack()

问题

我想要更新之前屏幕的useState值,并在单击goBack()时刷新屏幕,我知道可以使用useIsFocused()来实现,但在使用这个屏幕时,每次返回到屏幕时都会刷新,假设有一个ScreenA和ScreenB,所以当用户在ScreenB中执行任何操作时,我使用redux分发一个值,并在返回时更新useState值并刷新ScreenA,但它不起作用,我不知道问题在哪里,请帮助。

ScreenB

const leaveGroup = () => {
    hideMenu();
    callLikeMindsApi(`URL`, httpMethods.HTTP_PUT)
      .then(response => {
        if (response && response.data && response.data.success) {
          hideMenu();
          dispatch(updateHomeScreen(true));
          props.navigation.goBack();
        }
      })
      .catch(error => {
        Alert.alert('FAILED', error.response.data.error_message);
      });
  };

而在ScreenA中

const { updateValue } = useSelector(state => state.homeReducer);
  useEffect(() => {
    console.log('updateValue-1234', updateValue);
  }); // 如果(updateValue) { setOffset(1); setTotalPages(1); setMyChatRooms([]); getUserData(); } }, [isFocused]);

但是

setOffset(1);
setTotalPages(1);
setMyChatRooms([]);

值没有更新,如果我移除if(updateValue){}并像这样编写

useEffect(() => {
    setOffset(1);
    setTotalPages(1);
    setMyChatRooms([]);
    getUserData();
  }, [isFocused]);

那么代码会按预期工作,但每次我返回到ScreenA时都会刷新,我希望有条件地刷新。

英文:

I want to update the previous screen's useState value and refresh the screen on click of goBack(), I know there is a useIsFocused() to do that but using this screen it is refreshing every time i goBack to the screen, suppose there is a ScreenA and ScreenB, So when user is performing any action in ScreeB then I am dispatching a value using redux and on goBack I am updating the useState value and refreshing the screenA, But it not working, I don't know what's the problem, Please help.

ScreenB

const leaveGroup = () => {
    hideMenu();
    callLikeMindsApi(`URL`, httpMethods.HTTP_PUT)
      .then(response => {
        if (response && response.data && response.data.success) {
          hideMenu();
          dispatch(updateHomeScreen(true));
          props.navigation.goBack();
        }
      })
      .catch(error => {
        Alert.alert('FAILED', error.response.data.error_message);
      });
  };

And In ScreenA

const {updateValue} = useSelector(state => state.homeReducer);
  useEffect(() => {
    console.log('updateValue-1234', updateValue);
  }); // it is printing true in console if (updateValue) { setOffset(1); setTotalPages(1); setMyChatRooms([]); getUserData(); } }, [isFocused]);

But

setOffset(1);
setTotalPages(1);
setMyChatRooms([]);

values are not updating, if I remove the if(updateValue){} and writing like this

useEffect(() => {
    setOffset(1);
    setTotalPages(1);
    setMyChatRooms([]);
    getUserData();
  }, [isFocused]);

then code is working as expected, But it is refreshing every time I come back to the screenA and I want to refresh conditionally.

答案1

得分: 0

用以下方式替代 props.navigation.goBack();

props.navigation.navigate('ScreenA', {details});

带着你想传递的属性,在屏幕A中,从路由参数中获取该值:

ScreenA = (props) => {
   const [navigateState] = useState(props.route.params.details || {});
}

在导航到屏幕B时:

props.navigation.navigate('ScreenB', {details: navigateState});
英文:

instead of props.navigation.goBack(); do

props.navigation.navigate('ScreenA',{details});

with the prop that you want pass

in screen A get that value in state from route params

ScreenA = (props) => {
 
   const [navigateState] = useState(props.route.params.details||{});

---while navigating to Screen B---

   props.navigation.navigate('ScreenB',{details: navigateState});
    ...

答案2

得分: 0

我无法获取完整的代码并理解完整的逻辑,但如果您已经实现了redux,应该像这样使用它:

const {updateValue} = useSelector(state => state.homeReducer);
useEffect(() => {
  if (updateValue) {
    // 通过设置当前组件的一些状态来更新您的屏幕。
  } else {
    // 不要更新
  }
}, [updateValue])

如果您在应用程序的任何地方分发了updateValue的真值,那么无论屏幕-A是否获取焦点,它都将被更新。如果您只希望在屏幕-A处于焦点时更新它,您应该在useEffect中添加焦点条件。

英文:

I can't get full your code and understand the full logic but if you have already implemented redux you should use it like this:

const {updateValue} = useSelector(state => state.homeReducer);
useEffect(()=>{
  if (updateValue) {
    // update your screen juse by setting some states on the current component.
  } else {
   // don't update
  }
}, [updateValue])

if you dispatch true value for updateValue whereever in your app then screen-A would be updated regardless it's getting focus or not. if you want to update screen-A only when it's on focus you should add focus condition in useEffect.

huangapple
  • 本文由 发表于 2023年2月18日 21:11:36
  • 转载请务必保留本文链接:https://go.coder-hub.com/75493564.html
匿名

发表评论

匿名网友

:?: :razz: :sad: :evil: :!: :smile: :oops: :grin: :eek: :shock: :???: :cool: :lol: :mad: :twisted: :roll: :wink: :idea: :arrow: :neutral: :cry: :mrgreen:

确定