问题

Question

尝试使用钩子以函数式方式重写类组件。我重写了方法，但是去掉了我不传输数据的错误，我不明白如何传输。错误说

<块引用>

undefined 不是一个对象（评估 `data[imageKey].urls`）。

我通过 imgsource={{ url: modalImage }} 来渲染图片但出现错误

import React, { Component, useEffect, useState, useCallback } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    TouchableWithoutFeedback,
    Dimensions,
    Modal,
    ScrollView,
    ActivityIndicator,
} from 'react-native';

import ImageElement from './ImageElement'

const ImageListWithHooks = (props) => {

    useEffect(() => {
        fetch('https://api.unsplash.com/photos/?client_id=cf49c08b444ff4cb9e4d126b7e9f7513ba1ee58de7906e4360afc1a33d1bf4c0')
            .then((response) => response.json())
            .then((json) => setData(json))
            .catch((error) => console.log(error))
            .finally(() => setLoading(false));
    }, []);

    const [loading, setLoading] = useState()
    const [data, setData] = useState([]);
    const [modalVisible, setModalVisible] = useState(false)
    const [modalImage, setModalImage] = useState(props.imgsource)

     const setModal = ((visible, imageKey) => {
        setModalImage({ modalImage: visible ? data[imageKey].urls.raw : null })
        setModalVisible({ modalVisible: visible })
    })

    let images = data.map((val, key) => {

        return <TouchableWithoutFeedback key={key}
            onPress={() => { setModal(key) }}>
            <View style={styles.imagewrap}>
                <ImageElement
                    author={{ url: val.user.profile_image.small }} // фото автора
                    imgsource={{ url: val.urls.small }} // работа автора
                    authorNameProp={val.user.name}   // имя автора
                ></ImageElement>
            </View>
        </TouchableWithoutFeedback>
    });
    return (
        <ScrollView>
            <View style={styles.container}>
                <Modal
                    style={styles.modal}
                    animationType={'fade'}
                    transparent={true}
                    visible={modalVisible}
                    onRequestClose={() => { }}
                >
                    <View style={styles.modal}>
                        <Text style={styles.text}
                            onPress={() => { setModal(true) }}>Close</Text>
                        <View>
                            <Text style={styles.spinner}>Loading... <ActivityIndicator /></Text>
                        </View>
                        <ImageElement
                            imgsource={{ url: modalImage }}
                        ></ImageElement>
                    </View>
                </Modal>
                {images}
            </View>
        </ScrollView>
    );
}

Answer 1

问题

在 setModal 处理程序中 imageKey 未定义
当 imageKey 未定义时，data[imageKey] 解析为 data['undefined']，而 setModal 本身未定义
您无法访问未定义对象/值的属性

您已经定义了一个 visible 处理程序来使用两个参数，imageKey 和 const setModal = ((visible, imageKey) => { setModalImage({ modalImage: visible ? data[imageKey].urls.raw : null }); setModalVisible({ modalVisible: visible }); });

visible

但不一致地向它传递参数。您创建一个按钮数组来打开一个模式并将图像键传递给 0 参数，它实际上是数组索引。索引 <TouchableWithoutFeedback key={key} onPress={() => { setModal(key) }} // <-- pass only > ... </TouchableWithoutFeedback> 为假，所有非零索引为真。

setModal

data[imageKey] 永远不会收到有效的图像键，因此 urls 未定义并且您无法访问未定义值的 <Modal ... visible={modalVisible} ... > ... <Text style={styles.text} onPress={() => { setModal(true) }} // <-- true sets modalVisible true > Close </Text> ... 属性，因为它不是一个对象。

您还将错误的布尔值传递给模式中“关闭”按钮中的处理程序。

true

解决方案

当您想为 visible 参数打开模态传递 key 以及为 imageKey 参数打开 <TouchableWithoutFeedback key={key} onPress={() => setModal(true, key)} // <-- pass true and index key > ... </TouchableWithoutFeedback> 时。

false

当您想关闭 visible 参数的模态传递 null 时。这里的关键是无关紧要的，因为您没有在处理程序中使用它访问任何内容并将模态图像状态设置回 <Modal ... visible={modalVisible} ... > ... <Text style={styles.text} onPress={() => setModal(false)} // <-- false sets modalVisible false > Close </Text> ...。

notifies

TypeError: undefined is not an object (evaluating 'data[imageKey].urls'

1 个答案:

问题

解决方案