React Native：如何在onPress中切换双图标并修复setToggleIcon报错

问题分析与解决方案 #

报错TypeError: setToggleIcon is not a function的核心原因是**useState返回的是数组而非对象**，你错误使用了对象解构语法；同时还存在handleClick未执行的问题。以下是具体修复步骤：

1. 修复useState解构错误

useState返回的是「状态变量 + 更新函数」组成的数组，必须用数组解构：

// 错误写法
const { toggleIcon, setToggleIcon } = useState(false);

// 正确写法
const [toggleIcon, setToggleIcon] = useState(false);

2. 修复handleClick调用问题

在onPress回调中，需要调用函数而非仅引用：

<ButtonDetail
    onPress={() => {
        toggle(item.id);
        handleClick(); // 添加()执行函数
    }}>
    {toggleIcon ? (
        <AntDesign name="downcircle" size={17} color="green" />
    ) : (
        <AntDesign name="upcircle" size={17} color="green" />
    )}
</ButtonDetail>

3. （推荐优化）复用上下文状态，避免冗余

既然已经通过ToggleContext管理展开状态，可直接用该状态判断图标，无需单独维护toggleIcon，避免状态不一致：

const { toggle, showAccordion } = useContext(ToggleContext);
// 移除冗余的useState：const [toggleIcon, setToggleIcon] = useState(false);

<View>
    {!item.hasOwnProperty("animals") && (
        <ButtonDetail
            onPress={() => toggle(item.id)}>
            {/* 根据当前item是否在展开列表中切换图标 */}
            {showAccordion.includes(item.id) ? (
                <AntDesign name="downcircle" size={17} color="green" />
            ) : (
                <AntDesign name="upcircle" size={17} color="green" />
            )}
        </ButtonDetail>
    )}
</View>

内容的提问来源于stack exchange，提问作者mightycode Newton