如何在具有导航组件的函数中使用道具

Question

我正在尝试在函数组件中使用道具。但是该功能中包含导航组件，如下所示。

const AddProductList = ({props, route, navigation}) => {
  const {navData} = route.params;
  var [data, setData] = useState(DATA);
...
...
...
}

因为 route, navigation 我认为 props 是未定义的。

我正在尝试纯粹以函数式风格编写this 示例。 我需要做一些事情，比如从点击的平面列表中读取当前数据。

var id = props.item.product_id_to_delete

因为 props 未定义，所以我没有获取项目 ID 来删除点击的项目。 请任何人帮助我。

查看完整代码

import React, {useState} from 'react';
import {View} from 'react-native-animatable';
import {
  TextInput,
  TouchableOpacity,
  FlatList,
} from 'react-native-gesture-handler';
import Icon from 'react-native-vector-icons/FontAwesome';
import {StyleSheet, Pressable, Text, Button} from 'react-native';
import * as Animatable from 'react-native-animatable';
import Swipeout from 'react-native-swipeout';
import ButtonPressable from '../../components/ButtonPressable';
var sqlite_wrapper = require('./sqliteWrapper');

const DATA = [
  {
    prodName: 'Added data will look like this',
  },
];

const AddProductList = ({item, route, navigation}) => {
  const {navData} = route.params;
  const [prodName, setProdName] = useState('');
  var [data, setData] = useState(DATA);

  const swipeSettings = {
    style: {
      marginBottom: 10,
    },
    autoClose: false,
    backgroundColor: 'transparent',
    close: false,
    disabled: false,
    onClose: (sectionID, rowId, direction) => {
      console.log('---onclose--');
    },
    onOpen: (sectionID, rowId, direction) => {
      console.log('---onopen--' + item);
    },
    right: [
      {
        backgroundColor: 'dodgerblue',
        color: 'white',
        text: 'Edit',
        onPress: () => {
          console.log('-----edit-----');
        },
      },
    ],
    left: [
      {
        backgroundColor: 'red',
        color: 'white',
        text: 'Delete',
        onPress: () => {
          console.log('-----delete-----');
          sqlite_wrapper.deleteById;
        },
        type: 'delete',
        // component : (<ButtonPressable text="delete" />)
      },
    ],
    // buttonWidth: 100,
  };

  return (
    <View style={styles.container}>
      <Animatable.View
        animation="bounceIn"
        duration={1000}
        style={styles.inputFieldView}>
        <TextInput
          style={styles.textInput}
          onChangeText={(value) => setProdName(value)}
          placeholder="Add the Product"
          defaultValue={prodName}
        />
        <TouchableOpacity
          style={styles.addView}
          onPress={() => {
            sqlite_wrapper
              .insert({prodName: prodName}, sqlite_wrapper.collection_product)
              .then((result) => {
                console.log('---result---');
                console.log(result);
                if (result.rowsAffected) {
                  fetchAllData();
                }
              });

            function fetchAllData() {
              sqlite_wrapper
                .readAll(sqlite_wrapper.collection_product)
                .then((resultData) => {
                  console.log('---resultData---');
                  console.log(resultData);
                  setData(resultData);
                  setProdName('');
                });
            }

            // without sql this is how to update the state having a array
            // const updatedArray = [...data];
            // updatedArray.push({prodName: prodName});
            // setData(updatedArray);
            // setProdName('');
          }}>
          <Icon name="plus" size={16} style={styles.add} color="white" />
        </TouchableOpacity>
      </Animatable.View>
      <Animatable.View
        animation="bounceInLeft"
        duration={1500}
        style={{flex: 1}}>
        <FlatList
          data={data}
          keyExtractor={(item) => item.id}
          renderItem={({item, index}) => (
            <Swipeout {...swipeSettings}>
              <View style={styles.listView}>
                <Text style={styles.listViewText}>{item.prodName}</Text>
              </View>
            </Swipeout>
          )}
        />
      </Animatable.View>
    </View>
  );
};

var styles = StyleSheet.create({
  container: {
    flex: 1,
  },
  inputFieldView: {
    flexDirection: 'row',
    alignItems: 'center',
    alignSelf: 'stretch',
    margin: 10,
  },
  textInput: {
    flex: 1,
    backgroundColor: '#b2ebf2',
    borderTopLeftRadius: 7,
    borderBottomLeftRadius: 7,
    fontSize: 16,
  },
  addView: {
    backgroundColor: '#0f4c75',
    alignSelf: 'stretch',
    alignItems: 'center',
    justifyContent: 'center',
    borderTopEndRadius: 7,
    borderBottomEndRadius: 7,
    padding: 9,
  },
  add: {
    padding: 7,
  },
  listView: {
    padding: 20,
    backgroundColor: 'green',
    margin: 0,
    borderRadius: 0,
  },
  listViewText: {
    color: 'white',
  },
});

export default AddProductList;

Answer 1

把你的组件改成这个...

const AddProductList = ({item, route, navigation}) => {
  const {navData} = route.params;
  var [data, setData] = useState(DATA);
  var id = item.product_id_to_delete

...
}

说明：您已经在进行对象销毁，所以 props 是全部的，即主父级，但导航、路由是 喜欢：

props: {
   navigation,
   route,
   ...
}