React Native 如何更新上一屏面的useState值并在点击goBack()时刷新屏面

mwkjh3gx  于 2023-02-25  发布在  React
关注(0)|答案(2)|浏览(207)

我想更新上一个屏幕的useState值,并在单击"返回“时刷新屏幕(),我知道有useIsFocused()这样做,但使用这个屏幕它是刷新每次我回到屏幕,假设有一个ScreenA和ScreenB,因此,当用户在ScreeB中执行任何操作时,我将使用redux分派一个值,并在goBack上更新useState值并刷新但它不工作,我不知道是什么问题,请帮助。
屏幕B

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);
      });
  };

在屏幕A中

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]);

但是

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

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

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

那么代码按预期工作,但是每次我回到screenA时它都在刷新,我想有条件地刷新。

qvtsj1bj

qvtsj1bj1#

而不是props.navigation.goBack();做

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

你想要传递的 prop
在屏幕A中,从路由参数中获取状态值

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

---while navigating to Screen B---

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

j5fpnvbx2#

我不能得到完整的代码和理解完整的逻辑,但如果你已经实现了redux,你应该这样使用它:

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])

如果您在应用中任何位置为updateValue分派true值,则无论screen-A是否获得焦点,都会更新screen-A。如果您希望仅在screen-A获得焦点时更新screen-A,则应在useEffect中添加焦点条件。

相关问题