在 onPress 事件中没有传递给子组件的道具

Question

我在谷歌上搜索并遵循了如何将道具传递给子组件的解决方案，但失败了。我知道 navigation.navigate 可以在不使用 props 的情况下传递 ImagePick 的结果，但我想改为使用 props 传递它。 ListofItems 应该读取从 Parent 组件传递的 props 并 return 根据接收到的 props 的值返回数据。但是，问题是 ListofItems 在传递道具时甚至没有运行。提前感谢您的帮助。

父组件

import React, {useState, useEffect} from 'react';
import ReactDOM from 'react-dom';
import ListOfItems from './UserPage/ListOfItems';
import { ImageBackground, StyleSheet, Text, View, Platform, TouchableOpacity, Button } from 'react-native';
import { NavigationContainer } from '@react-navigation/native';
import { createStackNavigator } from '@react-navigation/stack';
import * as ImagePicker from 'expo-image-picker';

const Stack = createStackNavigator();

function Homes({ navigation, route, props }) {
  var personalColor;
  const [season,setSeason] = useState('');
  
  const receivedVal=(val)=>{
    setSeason({val})
    console.log(val);
    console.log(season);
  }

  const ImagePick = async () => {
      let result="";
      try {
      result = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.All,
        allowsEditing: true,
        aspect: [4, 3],
        quality: 1,
      });
      console.log(result);
      if (!result.cancelled) {
        // navigation.navigate('ItemList',{image:result, received: receivedVal})    
           return result;
      }
    }
    catch (error) {
      console.log(error);
    };
    console.log(result);
  }

  return (
    <View style={styles.title_container}>
      <ImageBackground source={require("./assets/pages/img.png")} style={styles.image}>
        <View style={styles.button_container} activeOpacity={0.3}>
          <TouchableOpacity
            onPress={() => {    
              const res=ImagePick();
              <ListOfItems image={res} received={receivedVal('')}/>   
            }}
            style={styles.button}>
            <Text style={styles.text}>Upload</Text>
          </TouchableOpacity>
        </View>
      </ImageBackground>
    </View>
  );
}


function Home() {
  return (
    <NavigationContainer theme={MyTheme}>
      <Stack.Navigator initialRouteName="HomeSite">
        <Stack.Screen options={{ headerShown: false }} name="HomeSite" component={Homes} />
        <Stack.Screen options={{ headerShown: false }} name="ItemList" component={ListOfItems} />
      </Stack.Navigator>
     </NavigationContainer>
  );
}

ReactDOM.render(<Home/>, document.getElementById('root'));
export default Home;

子组件未显示在控制台上。 console.log("test") 甚至运行.

import React, { useState} from 'react';
import ReactDOM from 'react-dom';
// import { NavigationContainer } from '@react-navigation/native';

function ListofItems({ navigation,props}) {
    console.log("test");
    const{image}=props.image;
    const{received}=props.received;
    console.log('image',image);
}
export default ListofItems;

Answer 1

关于“ListofItems 甚至不运行当道具被传递时。”

您已将 ListofItems 用作组件（就像您正在尝试渲染某些东西）而不是函数。

尝试

//解构函数

import { ListOfItems } from './UserPage/ListOfItems';

// 并执行函数 onPress

ListOfItems(image={res} received={receivedVal('')) instead of <ListOfItems .../>

希望这能解决您的控制台问题。

Answer 2

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import ListOfItems from "./UserPage/ListOfItems";
import {
  ImageBackground,
  StyleSheet,
  Text,
  View,
  Platform,
  TouchableOpacity,
  Button,
} from "react-native";
import { NavigationContainer } from "@react-navigation/native";
import { createStackNavigator } from "@react-navigation/stack";
import * as ImagePicker from "expo-image-picker";

const Stack = createStackNavigator();

function Homes({ navigation, route, props }) {
  var personalColor;
  const [season, setSeason] = useState("");
  const [showList, setVisibility] = useState(false);

  const receivedVal = (val) => {
    setSeason({ val });
    console.log(val);
    console.log(season);
  };

  const ImagePick = async () => {
    let result = "";
    try {
      result = await ImagePicker.launchImageLibraryAsync({
        mediaTypes: ImagePicker.MediaTypeOptions.All,
        allowsEditing: true,
        aspect: [4, 3],
        quality: 1,
      });
      console.log(result);
      if (!result.cancelled) {
        // navigation.navigate('ItemList',{image:result, received: receivedVal})
        return result;
      }
    } catch (error) {
      console.log(error);
    }
    console.log(result);
  };

  return (
    <View style={styles.title_container}>
      <ImageBackground
        source={require("./assets/pages/img.png")}
        style={styles.image}
      >
        <View style={styles.button_container} activeOpacity={0.3}>
          <TouchableOpacity
            onPress={() => setVisibility(true)}
            style={styles.button}
          >
            <Text style={styles.text}>Upload</Text>
          </TouchableOpacity>
          {showList ? (
            <ListOfItems image={res} received={() => receivedVal("")} />
          ) : (
            <View />
          )}
        </View>
      </ImageBackground>
    </View>
  );
}

function Home() {
  return (
    <NavigationContainer theme={MyTheme}>
      <Stack.Navigator initialRouteName="HomeSite">
        <Stack.Screen
          options={{ headerShown: false }}
          name="HomeSite"
          component={Homes}
        />
        <Stack.Screen
          options={{ headerShown: false }}
          name="ItemList"
          component={ListOfItems}
        />
      </Stack.Navigator>
    </NavigationContainer>
  );
}

ReactDOM.render(<Home />, document.getElementById("root"));
export default Home;

给你试试这个。

在 onPress 事件中没有传递给子组件的道具

Props not passed to Child component on onPress event

javascript

reactjs

react-native

expo

react-props