道具未在onPress事件中傳遞給子組件

我用谷歌搜索并遵循了如何將道具傳遞給子組件的解決方案，但失敗了。我知道 navigation.navigate 可以在不使用道具的情況下傳遞 ImagePick 的結果，但我想使用道具來傳遞它。ListofItems 應該讀取從 Parent 組件傳遞的 props 并根據收到的 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;

uj5u.com熱心網友回復：

關于“通過道具時 ListofItems 甚至不會運行。”

您已將 ListofItems 用作組件（就像您嘗試渲染某些內容）而不是函式。

嘗試

// 解構函式

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

// 并執行 onPress 函式

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

希望這可以解決您的控制臺問題。

uj5u.com熱心網友回復：

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;

給你試試這個。

標籤：

上一篇：ReactNativeuseEffect與異步呼叫導致陳舊狀態

下一篇：使用“expostart”啟動應用程式時沒有問題，但打開“yarnreact-nativerun-android”時出現問題