失败的支柱类型:在“e”中标记为“Failed”，但它的值为“null”

Question

在我的React应用程序中，我得到了以下错误，但它没有告诉我它发生在哪里。知道我怎么能确定它的位置吗？我拥有this.props.children的唯一地方似乎对此错误没有任何意义。

​

​

更新:这是Timeline组件。

import React, { PropTypes } from 'react';
import PerfectScrollBar from 'react-perfect-scrollbar';

// Components
import TimelineEntry from './timelineEntry';

// Defaults
import { AvatarUrl } from '../../../../enum/defaults';

const Timeline = ({ member, conversationId, messages, activeMessageId, handleClickMessageSelected }) => {

    return (
        <div className=" height-100 padding-top-70">

            <div className="padding-15" style={{ position: 'absolute', top: '0', left: '0' }}>

                {typeof conversationId !== "undefined" && conversationId !== ""
                    ? <div className="timeline-item-msg" id="msc-newConversationMessage">

                        <img src={member.avatar ? member.avatar.smallAvatarUrl : AvatarUrl.avatar} className="tim-image" />
                        <div className="tim-msg">
                            <div className="tim-msg-body cursor-pointer border-radius">
                                New Message
                            </div>
                        </div>
                      </div>
                    : null
                }
            </div>

            <div className="height-100 position-relative padding-15">

                <PerfectScrollBar>
                    {
                        messages.length > 0
                            ? messages.map(item => <TimelineEntry key={item.id} entry={item} activeMessageId={activeMessageId} handleClickMessageSelected={handleClickMessageSelected} />)
                            : null
                    }
                </PerfectScrollBar>

            </div>
        </div>
    );
}

Timeline.PropTypes = {

    member: PropTypes.object.isRequired,
    conversationId: PropTypes.string.isRequired,
    messages: PropTypes.array.isRequired,
    activeMessageId: PropTypes.string.isRequired,
    handleClickMessageSelected: PropTypes.func.isRequired
};

export default Timeline;

这是TimelineEntry组件：

import React, { PropTypes } from 'react';

// Defaults
import { AvatarUrl } from '../../../../enum/defaults';

// Utils
import { shortenTextToMaxCharacters } from '../../../../utils/string/stringUtils';

const TimelineEntry = ({ entry, activeMessageId, handleClickMessageSelected }) => {

    let wrapperClass = 'timeline-item-msg';
    if (entry.userFlag != 0)
        wrapperClass += ' flag-' + entry.userFlag;

    if (entry.id === activeMessageId)
        wrapperClass += ' active';

    return (
        <div className={wrapperClass} id={'mst-' + entry.id} onClick={e => handleClickMessageSelected(entry.id)}>

            <img src={entry.sender.avatarUrl ? entry.sender.avatarUrl : AvatarUrl.avatar} className="tim-image" />

            <div className="tim-msg">

                <div className="tim-msg-header">

                    {entry.sender.fullName} <br /><span className="opacity-6">{entry.messageTimeStamp.weekDay}  {entry.messageTimeStamp.date} <i className="margin-right-40">{entry.messageTimeStamp.time}</i></span>

                </div>

                <div className="tim-msg-body cursor-pointer">

                    {shortenTextToMaxCharacters(entry.body.trim(), 75)}

                </div>

            </div>

        </div>
    );
}

TimelineEntry.PropTypes = {

    entry: PropTypes.object.isRequired,
    activeMessageId: PropTypes.string.isRequired,
    handleClickMessageSelected: PropTypes.func.isRequired
};

export default TimelineEntry;

Answer 1

您在PerfectScrollBar组件中使用的Timeline组件有一个propType children: PropTypes.node.isRequired。(代码位于https://github.com/goldenyz/react-perfect-scrollbar/blob/master/src/scrollbar.js)

在Timeline组件中，当messages.length为0时，您将呈现null；这将导致PerfectScrollBar不呈现children，这反过来又会给出propType警告。

解决办法是呈现一个空的div，<div></div>而不是null，以便满足PerfectScrollBar的propTypes。