如何将useState的setState函数作为props传递给自定义组件？

你的代码里有两处关键错误，导致setState无法正常工作，以下是修正方案：

1. 父组件传递props时的错误修正 #

你当前在调用DisclaimerModal时，直接执行了setShowDialog(false)，这会在组件渲染阶段就立即触发状态更新，而不是把点击时要执行的函数传递给子组件。因为setShowDialog(false)是函数调用，返回值是undefined，相当于给handleAccept和handleDecline传了无效的值。

修正后的父组件代码：

const [showDialog, setShowDialog] = useState(true);

<DisclaimerModal
     text='...'
     showDialog={showDialog}
     // 传递箭头函数，点击时才执行setState
     handleAccept={() => setShowDialog(false)}
     handleDecline={() => setShowDialog(false)}
/>

2. 子组件onPress事件的错误修正 #

子组件里的onPress={() => { handleDecline }}只是引用了函数但没有调用它，相当于点击后什么都不会做。有两种正确写法：

写法一：直接传递函数引用（无额外逻辑时推荐） #

interface DisclaimerModalProps extends ViewProps {
    text: string,
    showDialog: boolean,
    handleAccept: () => void,
    handleDecline: () => void
}

export function DisclaimerModal({ text, showDialog, handleAccept, handleDecline }: DisclaimerModalProps): JSX.Element {
    return (
        <Modal
            visible={showDialog}
            transparent
        >
            <View style={styles.centeredView}>
                <View style={styles.modalView}>
                    <Text style={styles.textDisclaimer}>{text}</Text>
                    <View style={styles.modalRow}>
                        <Text onPress={handleDecline}>Cancel</Text>
                        <Text onPress={handleAccept}>Accept</Text>
                    </View>
                </View>
            </View>
        </Modal>
    )
}

写法二：箭头函数内调用（需要额外逻辑时使用） #

如果点击时除了执行handleAccept/handleDecline还要做其他操作，可以用这种方式：

<Text onPress={() => {
    // 这里可以加额外逻辑，比如日志
    console.log('用户点击了Cancel');
    handleDecline();
}}>Cancel</Text>

更灵活的传递方式（可选） #

如果需要让子组件自己控制状态值，可以直接传递setShowDialog本身，然后在子组件里调用时传入参数：

父组件调用：

<DisclaimerModal
     text='...'
     showDialog={showDialog}
     handleAccept={setShowDialog}
     handleDecline={setShowDialog}
/>

子组件修改：

// 先更新props类型，允许接收带参数的函数
interface DisclaimerModalProps extends ViewProps {
    text: string,
    showDialog: boolean,
    handleAccept: (value: boolean) => void,
    handleDecline: (value: boolean) => void
}

// 调用时传入具体值
<Text onPress={() => handleDecline(false)}>Cancel</Text>
<Text onPress={() => handleAccept(false)}>Accept</Text>

内容的提问来源于stack exchange，提问作者Daniel Corona