为什么在函数中更改 let 变量后无法显示？答案

【问题标题】：Why can't I display a let variable after changing it in a function?为什么在函数中更改 let 变量后无法显示？
【发布时间】：2022-01-16 12:53:36
【问题描述】：

我目前正在尝试在显示之前使用 if 语句将不同的对象分配给 let 变量。出于某种原因，在函数中分配对象将导致变量不显示任何内容，而不是显示分配的对象。

我举个例子：

在下面的代码中，我根据我从另一个文件传递的 prop 将 2 个不同的图标分配给 let 变量，结果与我正在寻找的完全匹配。

    const BottomBar = ({ screen }) => {
        let icon;

        if (screen === 'Home') {
            icon = (<Entypo name='home' size={30} color='white'/>);
        } else {
            icon = (<SimpleLineIcons name='home' size={24} color='white'/>);
        }

        return (
            <View>{icon}</View>
        );
    }

但是，如果我要重新尝试将函数与 useEffect 挂钩组合使用相同的示例，则 {icon} 对象不会显示任何内容。

    const BottomBar = ({ screen }) => {
        let icon;

        const checkScreen = () => {
            if (screen === 'Home') {
                icon = (<Entypo name='home' size={30} color='white'/>);
            } else {
                icon = (<SimpleLineIcons name='home' size={24} color='white'/>);
            }
        };

        useEffect(() => {
            checkScreen();
        });

        return (
            <View>{icon}</View>
        );
    }

马上，我可以假设这是因为函数是异步的。在将其分配给对象之前，正在使用 let 变量“icon”。所以一个简单的修复方法如下：

     const BottomBar = ({ screen }) => {
        const checkScreen = () => {
            if (screen === 'Home') {
                return (<Entypo name='home' size={30} color='white'/>);
            } else {
                return (<SimpleLineIcons name='home' size={24} color='white'/>);
            }
        };

        let icon = checkScreen();

        return (
            <View>{icon}</View>
        );
    }

但是，如果我想稍后在按下按钮后用不同的对象重新分配变量图标怎么办。简单地立即分配一个对象不允许我稍后重新分配它。我想做的是根据需要分配对象。我错过了什么？我是错误地传递了变量还是这根本不可能？

【问题讨论】：

标签： javascript android reactjs react-native

【解决方案1】：

let 变量在赋值后不会使页面重新呈现，因此值已更改但反应组件不会读取它，请使用 useState 钩子代替这样的目的，但我建议您使用条件像这样为您的案例渲染：

const BottomBar = ({ screen }) => {
    const checkScreen = () => {
        if (screen === 'Home') {
            return (<Entypo name='home' size={30} color='white' />);
        } else {
            return (<SimpleLineIcons name='home' size={24} color='white' />);
        }
    };

    return (
        <View>{checkScreen()}</View>
    );
}

【讨论】：

我喜欢您的示例，因为它确实解决了这个特定问题。但是，如果我想使用相同的 if 语句在同一个函数中一次重新分配多个变量，从而阻止我使用 return 语句怎么办。您提到使用 useState，我将如何将它用于对象？
const [someObj, setSomeObj] = React.useState({name:'alex', age:69}); //改变对象 const changeAge = ()=>{ someObj.age = 420; setSomeObj(someObj); }
这只是简单地设置一个名为“someObj”的变量，其中包含字符串和整数等基本值。我需要将它用于图标或图像之类的对象。
正如我上面所说的，对这些情况使用条件渲染。