Question

我有一个反应设置，我试图根据特定值更改布局。在开始合并switch语句之前，我正在尝试修改当前代码，以确保可以将要映射的数组替换为将用于不同布局的数组，此刻看起来此更改正在更改由this.props元素组成。

代码如下：

export default class BlogFeed extends React.Component {
    ...
       render(){
        console.log(this.props);
        return (
            <div>
            { 
                this.props.blogs.map((blog, index) => {
                    return (
                        <div className="row">
                            <div className="col-md-12 blog-card-container">
                                <BlogCard {...blog} key={blog.blogIdHash} user={this.props.user} />
                                <Comments comments={this.state.comments} key={index} blogId={blog.blogIdHash} csrf={this.props.csrf} userId={this.props.user.userIdHash} updateComments={this.updateCommentsFunc} deleteCommentFunc={this.deleteCommentsFunc} deletedCommentBlogId={this.state.deletedCommentBlogId} flash={this.state.flash} userId={this.props.user.userId}/> 
                            </div>
                        </div>
                    );
                })
            }
            </div>
        );
    }
}

按原样放置，this.props包含的内容是

blogs: (10) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
changeBlogs: [{…}]
csrf: "code"
feedPreference: 1
isLoading: false
negativeBlogs: [{…}]
notifications: [{…}]
onboardingWelcome: undefined
positiveBlogs: (8) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]

当我将this.props.blogs.map更改为this.props.positiveBlogs.map时，它会破坏我的JSX。

Uncaught TypeError: Cannot read property 'map' of undefined
    at BlogFeed.render (VM226 182:95)
    at finishClassComponent (VM81 80:10249)
    at updateClassComponent (VM81 80:10226)
    at beginWork (VM81 80:10605)
    at performUnitOfWork (VM81 80:12573)
    at workLoop (VM81 80:12682)
    at HTMLUnknownElement.callCallback (VM81 80:1299)
    at Object.invokeGuardedCallbackDev (VM81 80:1338)
    at invokeGuardedCallback (VM81 80:1195)
    at performWork (VM81 80:12800)

和this.props现在包含：

{blogs: Array(0), isLoading: true, onboardingWelcome: false, notifications: Array(0)}

突出的是isLoading状态，该状态从该组件设置为更高级别，并且在从服务器返回数据时设置为false，但是服务器正在发送数据就很好了，所以我不确定为什么这可能会受到影响。如果需要回答，我可以提供父级组件代码。

Answer 1

如果确定只渲染positiveBlogs，则可以这样做：

this.props.positiveBlogs && this.props.positiveBlogs.map(...

这可以防止在没有数组需要处理时渲染器调用地图。

Reactjs Map更改道具状态

1 个答案: