Typescript useState 错误布尔值没有调用签名答案

【问题标题】：Typescript useState error boolean has no call signaturesTypescript useState 错误布尔值没有调用签名
【发布时间】：2021-10-27 01:17:13
【问题描述】：

我正在使用带有 React Native 的 Typescript，但在控制台上出现错误时遇到问题。它说“这个表达式是不可调用的。类型'布尔'没有调用签名。” 代码很简单，它只有在主页上有两张卡片，如果用户点击其中一张，它应该将用户发送到该页面。为了更好地理解钩子，我试图通过 useState 来实现。这是 home.tsx 中的代码：

import { Button, StyleSheet, Text, View } from "react-native"

import CardsComponent from "../../components/cards/cards"
import EcoNoticias from "../../components/EcoNoticias/EcoNoticias";
import React from "react";
import { useState } from "react";

export interface HomeComponentProps {
    
}
 
const HomeComponent: React.FC<HomeComponentProps> = () => {
    const [buttonPressed, setButtonPressed] = useState<boolean>(false);

    const handlePage = () => {
        setButtonPressed(true);
    };
    
    return (
        <>
            <View>
                <Text style={styles.title}>Hello User</Text>
                <View>
                    {() => buttonPressed(false)} ?
                    <CardsComponent>
                        <Text style={styles.textCard}>Tips</Text>
                        <Button title='Tips' onPress={() => {}} />
                    </CardsComponent>
                    <CardsComponent>
                        <Text style={styles.textCard}>Eco-Noticias</Text>
                        <Button title='Eco-Noticias' onPress={handlePage} />
                    </CardsComponent> : <EcoNoticias />
                </View>
            </View>
        </>
    );
};
const styles = StyleSheet.create({
    title: {
        fontSize: 23,
        paddingBottom: 50,
        textAlign: 'center',
    },
    textCard: {
        color: 'white',
        fontWeight: '700',
        textAlign: 'center',
        paddingBottom: 10,
    },
    buttonStyle: {
        width: '50%',
    },
});


export default HomeComponent;

if ternario 中的错误，第 24 行：“buttonPressed(false)”。

【问题讨论】：

不应该是setButtonPressed(false)吗？
你的意思是在函数handlePage中吗？我希望它是真的，所以当用户单击按钮时会转到该页面。
{() => buttonPressed(false)} ? 语句有什么作用？
fi 为 false，显示卡片组件及其内容，如果为 true，则显示 EcoNoticias 组件
听起来你打算这样做 {buttonPressed === false ? 或 {!buttonPressed ?

标签： typescript react-native react-hooks use-state react-typescript

【解决方案1】：

{() => buttonPressed(false)} ?

这行说要切换回纯 javascript（而不是 jsx），然后使用文本 () => buttonPressed(false) 创建一个函数，然后切换回 jsx 并输入字符串“？”屏幕上。您得到的打字稿错误指出，由于 buttonPressed 是一个布尔值，因此尝试将其作为函数调用是没有意义的。

从 cmets 看来，您的意图是：

{buttonPressed === false ? (
  <React.Fragment>
    <CardsComponent>
      <Text style={styles.textCard}>Tips</Text>
      <Button title="Tips" onPress={() => {}} />
    </CardsComponent>
    <CardsComponent>
      <Text style={styles.textCard}>Eco-Noticias</Text>
      <Button title="Eco-Noticias" onPress={handlePage} />
    </CardsComponent>
  </React.Fragment>
) : (
  <EcoNoticias />
)}

<React.Fragment> 是必需的，因为您希望拥有多个元素。如果您愿意，可以使用简写 <></> 代替 <React.Fragment></React.Fragment>

【讨论】：