如何在本機反應中只渲染一次警報組件？

Question

如果我的dashboardScreen 被多次渲染，我如何才能在本機反應中只渲染一次Alert 組件？

我正在使用 Context api，如果我調度一個動作它會導致另一個渲染，如果我使用一個 useState 它會導致另一個渲染/渲染，任何想法都會非常感激。

**AppContext.js**
export const AppContext = createContext();

export const AppProvider = ({ children })=> { 

const [ state, dispatch ] = useReducer( appReducer, appInicialState);

 return (
        <AppProvider.Provider value={{
            ...state,
        }}>
            { children }
        </AppProvider.Provider>
    )

}

**Dashboard.js**
export const Dashboard = () => {
 const { state, dispatch } = useContext( AppContext );
 const [showAlert, setShowAlert] = useState(true);

 const handleCancelPressed = () => {
      dispatch({ 
            type: 'cancelPressed',
            payload: {
                userInfo: false,
            }
        });
 }

 const handleAcceptPressed = () => {
      dispatch({ 
            type: 'acceptPressed',
            payload: {
                userInfo: true,
            }
        });
 }

 return (
  <View style={styles.container}>
    {showAlert && (
         Alert.alert(
    "Alert Title",
    "My Alert Msg",
    [
      {
        text: "Cancel",
        onPress: handleCancelPressed,
      },
 {
        text: "Ok",
        onPress: handleAcceptPressed ,
      },
    ],
    {
      cancelable: true,
    }
  );
    )}
  </View>

)}

Answer 1

useEffect是一種可以解決您的問題的方法，只需渲染一次。

const [showAlert, setShowAlert] = useState(null);

useEffect(()=>{setShowAlert(true)},[])

空括號表示“showAlert”的值將只設置一次。

您應該詳細閱讀 useEffect 以正確實現這一點。

我沒有在任何編碼環境中嘗試這個示例，我只分享了一個概念證明供您使用。

希望這可以幫助，

問候， 沙米爾·烏丁