javascript - 未捕获的类型错误：无法读取未定义的属性“名称” - Reactjs

Question

下面是我在学习react的时候写的代码，还没到用到state的地步。在练习使用 props 的过程中，遇到如下错误：Error snapshot

我无法弄清楚为什么道具显示为未定义。我处于理解 React 的非常基本的阶段，希望能在这方面提供任何帮助。谢谢

import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import moment from 'moment';
import PropTypes from 'prop-types';

let tweet = {
    message: "Something about cats.",
    gravatar: "xyz",
    author: {
        handle: "catperson",
        name: "IAMA Cat Person"
    },
    likes: 2,
    retweets: 5,
    timestamp: "2016-07-30 21:24:37"
};

let from = {
    name: "john doe",
    addressLine1: "fake house, fake lane",
    addressLine2: "fake city, fake state"
}

let to = {
    name: "jane doe",
    addressLine1: "fake-ish house, fake-ish lane",
    addressLine2: "fake-ish city, fake-ish state"
}

function Tweet( {tweet} ) {
    return (
        <div className="tweet">
            <Avatar hash={tweet.gravatar}/>
            <div className="content">
                <NameWithHandle author={tweet.author}/><Time time={tweet.timestamp}/>
                <Message text={tweet.Message}/>
                <div className="buttons">
                    <ReplyButton/>
                    <RetweetButton count={tweet.retweets}/>
                    <LikeButton count={tweet.likes}/>
                    <MoreOptionsButton/>
                </div>
            </div>
        </div>
    );
}

function Avatar( {hash} ) {
    var url = `https://www.gravatar.com/avatar/${hash}`;
    return (
        <img src={url} className="avatar" alt="avatar" />
    );
}

function Message( {text} ) {
    return (
        <div className="message">
            {text}
        </div>
    );
}

function NameWithHandle( {author} ) {
    const { name, handle } = author
    return (
        <span className="name-with-handle">
        <span className="name">{name} </span>
        <span className="handle">@{handle}</span>
        </span>
    );
}

// The {} is used when there is assignment going on inside the expression the component is pointing to,
// The () is used when there is nothing except a return of JSX from the component.
// If there is use of {} then the return statement is mandatory to return JSX and render.

const Time = ( {time} ) => {
    const timeString = moment(time).fromNow();
    return <span className="time">{timeString}</span>;
}

const ReplyButton = () => <i className="fa fa-reply reply-button"/>

const RetweetButton = ( {count} ) => (
    <span className="retweet-button-span">
        <span className="retweet-button-icon"><i className="fa fa-retweet retweet-button"/></span>
        {getRetweetCount(count)}
    </span>
);

const LikeButton = ( {count} ) => (
    <span className="like-button-span">
        <span className="like-button-icon"><i className="fa fa-heart like-button"/></span>
        {count > 0 &&
            <span className="like-count">
            {count}
            </span>}
    </span>
);

const MoreOptionsButton = () => <i className="fa fa-ellipsis-h more-options-button"/>

function getRetweetCount(count) {
    if(count > 0) {
        return (
            <span className="retweet-count">
            {count}
            </span>
        );
    } else {
        return null;
    }
}

const AddressLabel = ( {person} ) => {
    const {name, addressLine1, addressLine2} = person;
    return(
        <div className = "addressLabel">
            <div className = "person-name"> {name} </div>
            <div className = "person-address1"> {addressLine1} </div>
            <div className = "person-address2"> {addressLine2} </div>
        </div>
    );
}

const Envelope = ( {from}, {to} ) => (
    <div>
        <AddressLabel person={from}> From: </AddressLabel>
        <AddressLabel person={to}> To: </AddressLabel>
    </div>
);



LikeButton.propTypes = {
    count: PropTypes.number
};

RetweetButton.propTypes = {
    count: PropTypes.number
};

Time.propTypes = {
    time: PropTypes.string
};

Message.propTypes = {
    text: PropTypes.string
};

NameWithHandle.propTypes = {
    author: PropTypes.shape({
        name: PropTypes.string.isRequired,
        handle: PropTypes.string.isRequired
    }).isRequired
};

Avatar.propTypes = {
    hash: PropTypes.string.isRequired
};

ReactDOM.render(
    <div>
        <Tweet tweet = {tweet}/>
        <Envelope from = {from} to = {to}/>
    </div>,
    document.querySelector('#root')
);

标签： javascriptreactjs

Answer 1

您必须从以下同一对象中解构from和解构：topropsEnvelope

const Envelope = ( {from, to} ) => (
    <div>
        <AddressLabel person={from}> From: </AddressLabel>
        <AddressLabel person={to}> To: </AddressLabel>
    </div>
);