如何在 react-native 中重新渲染 2 次答案

【问题标题】：how awoid 2 times re render in react-native如何在 react-native 中重新渲染 2 次
【发布时间】：2020-05-27 23:42:40
【问题描述】：

我尝试根据用户检查进行路由，我做到了，但我的方法工作了两次。我从我的日志中理解了它

我正在使用 redux，这是我在 mainrouter.js 中的“使用效果”

// currentUser : null // in  initialState for users

useEffect(() => {
    if(states.currentUser== null)
    {
        console.log("Checking user for routing");
        actions.getCurrentUserACT();
    }
    else{
        console.log("Logged in")
    }
},[]);

我的 mainrouter.js 返回

 return (
    <NavigationContainer>
        {
            states.currentUser == null ?
                (this.SignStackScreen()) :
                (this.MainTabNavigator())
        }
    </NavigationContainer>
);

这是我在 redux 操作中的“getCurrentUserAct”方法

export function getCurrentUserACT() {
return function (dispatch) {

    firebase.auth().onAuthStateChanged(user => {
        if (user) {
            console.log("User authed..");
            dispatch({type:actionTypes.CURRENT_USER,payload:user})
        } else {
            console.log("User notauthed..");
            dispatch({type:actionTypes.CURRENT_USER,payload:null})
        }
    });
}

当我的应用启动时，日志是 ..（如果我之前登录过）

检查用户的路由
用户认证
用户认证

我认为这是原因，useeffect第一次工作并且状态改变了，使用哪个作为回报并重新渲染“ 但后来我移除条件，日志是一样的。

那么我怎样才能避免这种情况呢？有没有办法在 useeffect 之前运行方法并避免第二次渲染？还是等待数据有效？

【问题讨论】：

标签： reactjs react-native redux react-hooks

【解决方案1】：

您的代码看起来正确，没有理由因为 useEffect 而记录两次，因为您将它用作 componentDidMount 所以它被调用了一次。

记录两次的原因是这段代码sn -p：

firebase.auth().onAuthStateChanged(user => {

这里的 onAuthStateChanged 是回调，当 Firebase 上的身份验证状态发生变化时会调用它。如果你要检查用户是否登录，那么你需要避免像下面这样

if (user) { }

请尝试 console.log(user) 并检查用户是否在双重日志记录中保持相同。我相信用户的内在属性会改变。

希望能帮助你理解

【讨论】：

如果我之前登录过，用户属性没有改变。但我注销并再次登录，日志运行良好
您是否再次检查操作？请让我看看 CURRENT_USER 的操作
我将其作为新帖子分享@Bojan
如果 state.current_user 两次为空，请检查 mainrouter.js。在我看来，这部分是最可疑的。你是怎么得到状态的？像 const states = {....} ？
我得到 mapstatetoprops 所有状态。 currentUser state 的初始值为 null function mapStateToProps(state) { return { states: { currentUser: state.currentUserReducer, }} }

【解决方案2】：

export function getCurrentUserACT() {
return function (dispatch) {

    firebase.auth().onAuthStateChanged(user => {
        dispatch(setCurrentUserACT(user))
        console.log("control point" + user);
        // if (user) {
        //     console.log("User authed..");
        //     dispatch({type:actionTypes.CURRENT_USER,payload:user})
        // } else {
        //     console.log("User notauthed..");
        //     dispatch({type:actionTypes.CURRENT_USER,payload:null})
        // }
    });
}

日志是双的

检查用户的路由
控制点[object Object]
控制点[object Object]

______________________编辑于 31.05______________________

我把我的代码改了一点，如下所示

const dispatch = useDispatch();
const currentUser = useSelector(state => state.currentUserReducer);
useEffect(() => {
    console.log(JSON.stringify(currentUser));
    if (currentUser == null) {
        console.log("Checking user for routing");
        //dispatch(getCurrentUserACT());
    }
    else {
        console.log("Logged in")
    }
}, []);

我找到了类似提示的东西，但我无法修复，因为我不知道当应用启动日志是

空
检查用户的路由

我没有调度 getCurrentUserAct()，所以日志是正确的。如果我调度，用户将检查（用户已经登录），组件重新渲染，这是来自双重渲染的双重日志。

我需要在 useEffect 之前调度，而不是在 useEffect 中

有办法吗？

【讨论】：