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

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']，而 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>
  ...

解决方案

当您想为visible 参数打开模态传递true，为imageKey 参数打开key。

<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>
  ...