javascript - 删除Hook，自动删除数据库中的所有条目

Question

我创建了一个删除 Hook 来单独删除屏幕上的一些数据，但每次加载该 Hook 时，它都会删除页面上的所有条目。我试图能够单击一个图标并删除一个项目。我通过 props 传递项目的 id，然后调用我的删除函数，但钩子(Hook)不会等待用户输入，而是删除数据库中的所有内容。如有任何帮助，我们将不胜感激。

Hook

import { useContext } from 'react';
import { Context as CertificationContext } from '../context/CertificationContext';
import { Context as CertificateInfoContext } from '../context/CertificateInfoContext';

export default () => {
  const { deleteCertification } = useContext(CertificationContext);
  const {
    state: { certificationId }
  } = useContext(CertificateInfoContext);
  console.log('Delete' + certificationId);
  const removeCertification = async id => {
    await deleteCertification(id);
  };

  return removeCertification;
};

组件

import { View, Text, StyleSheet } from 'react-native';
import { Button } from 'react-native-elements';
import Icon from 'react-native-vector-icons/Feather';
import { navigate } from '../navigationRef';
import useDeleteCertification from '../hooks/useDeleteCertification';

const Certifications = ({ title, month, description, id }) => {
  const removeCertification = useDeleteCertification();
  return (
    <View style={styles.mainContainer}>
      <View style={styles.firstContainer}>
        <Text style={styles.monthText}>{month}</Text>
        <Text style={styles.dayText}>FRI</Text>
      </View>
      <View style={styles.secondContainer}>
        <Text style={styles.title}>{title}</Text>
        <Text style={styles.subtitle}>{description}</Text>
        <View style={styles.buttonView}>
          <Button
            icon={<Icon name='trash-2' color='grey' size={15} />}
            type='clear'
            onPress={removeCertification(id)}
          />
          <Button
            icon={<Icon name='share' color='grey' size={15} />}
            type='clear'
            onPress={() => {
              console.log('Share Button');
            }}
          />
          <Button
            icon={<Icon name='edit' color='grey' size={15} />}
            type='clear'
            onPress={() => {
              navigate('EditCertification', { id });
            }}
          />
        </View>
      </View>
    </View>
  );
};

Answer 1

在 onPress 属性中使用箭头函数，如下所示:

<Button
  icon={<Icon name='trash-2' color='grey' size={15} />}
  type='clear'
  onPress={() => removeCertification(id)}
/>

现在您传递的是函数而不是函数的结果，因此它不会在渲染时触发