首页 > 解决方案 > 如何解决此错误“TypeError:无法解构'undefined'的属性'image',因为它是未定义的”?下面是我的代码-

问题描述

React Js 我收到以下错误-“TypeError:无法解构'undefined'的属性'image',因为它是未定义的”?下面是我的代码“我该如何解决这个问题,为什么它显示未定义是我定义的方式是正确的.....?

有人可以帮忙吗?

下面是 React JS 中的代码


    import React from 'react';
    // import profile from '../assets/rocket.svg';
    import styled from 'styled-components';
    import { useSpring, animated, config } from 'react-spring';
    import "../css/Card.css"
    
    
    const Container = styled(animated.div)`
    display: inline-block;
    padding: 0em;
    background: #C7D2FE66;
    border-radius: 10px;
    z-index: 1;
    position: relative;
    backdrop-filter: blur(10px);
    border: 2px solid transparent;
    background-clip: border-box;
    // cursor: pointer;
    
    `;
    
    const StyledImg = styled.img`
        width: 500px;
        height:auto;
        // height: auto;
        border: 2px solid #000;
        // border-radius: 50%;
    `;
    
    const StyledH1 = styled.h1`
        line-heright: 1.5;
        letter-spacing: 1.5;
        font-family: "Gilroy";
    `;
    
    const StyledH3 = styled.h3`
        line-heright: 1.5;
        letter-spacing: 1.15;
        font-family: "Gilroy";
        font-size: 20px;
    `;
    
    const calc = (x, y) => [-(y - window.innerHeight / 2) / 20, (x - window.innerWidth / 2) / 20, 1]
    const trans = (x, y, s) => `perspective(600px) rotateX(${x}deg) rotateY(${y}deg) scale(${s})`

    function Card({ heading }, { description }, { image }) {
        const [props, set] = useSpring(() => ({ xys: [0, 0, 1], config: config.default }))
        return (
            <Container
                onMouseMove={({ clientX: x, clientY: y }) => (set({ xys: calc(x, y) }))}
                onMouseLeave={() => set({ xys: [0, 0, 1] })}
                style={{
                    transform: props.xys.interpolate(trans)
                }}
            >
    
                <StyledH1>{heading}</StyledH1>
                <StyledH3>{description} <br /> </StyledH3>
                <StyledImg src={image} />
            </Container>
        );
    }
    
    export default Card;
    
    ```

标签: javascriptreactjsundefinedtypeerror

解决方案


推荐阅读