javascript - ReactJS - 将返回对象从 State 传递到 Prop

Question

我试图遵循 ReactJS 的最佳实践，即在可能发生任何状态更改时使用状态组件，在组件无状态时使用 props，但我不确定应该如何构建我的组件以允许这两种类型。目前，我正在获取一个 JSON 文件并在状态组件中设置各个对象，然后我希望使用每条信息的单独 prop 组件来构建该信息的设计和布局，我认为这是最佳实践，但是prop 组件渲染错误，我传递的属性是 undefined 。这是父/子组件问题吗？

这是我的 View 提要(顶级，正在渲染):

export default class CommentFeed extends React.Component {

    render() {
        return (
            <div className="comment-feed">
                <Comments />
            </div>
        );
    }
}

然后我的获取并设置为状态组件:

//Comments List
class Comments extends React.Component{

    constructor(props, context) {
        super(props, context);
        this.state = this.context.data || window.__INITIAL_STATE__ || {users: []};
    }

    fetchList() {
        fetch('http://localhost:3000/api/test')
            .then(res => {
                return res.json();
            })  
            .then(data => {
                console.log(data);
                let users = data.map((user, index) => {
                    return(
                        <div key={index}>
                        <UserTitle title={user.title} />
                        <li>{user.discovery}</li>
                        <ul>
                        {
                            user.user_comments.map((comment, i) => {
                                console.log("this is the comment " + JSON.stringify(comment));
                                console.log("this is the i " + i);
                                return (
                                        <div key={comment.userCommentId}>
                                        <h4>{comment.app_user.fullNameSlug}</h4>
                                        <li>{comment.comment}</li>
                                        </div>
                                )
                            })
                        }
                        </ul>
                        </div>
                    )
                })
                this.setState({ users: users });
            })  
            .catch(err => {
                console.log(err);
            });
    }

    componentDidMount() {
        this.fetchList();
    }

    render() {
        return (
            <div>
            <h2>Comments List</h2>
            <ul>
            {this.state.users}
            </ul>
            </div>
        )
    }
};

这是 <UserTitle /> Prop 组件:

class UserTitle extends React.Component{
    render(props){
        return (
            <div className="test">
                <h1>{props.title}</h1>
            </div> 
        )
    }
}

Answer 1

您对于将组件拆分为单一用途的组件的思考方式是正确的。

一般来说，在“社区”中，我们通常有两种类型的组件:

• 容器组件
• 查看组件(dumb组件)

容器组件应该处理业务逻辑、获取数据、操作等，然后将所需数据作为 props 传递给 View 组件。

View 组件，不处理数据，不获取数据，只是显示 View 。大多数情况下，他们甚至没有自己的状态(并非总是如此)

以下是您需要具备的简要概述:- 评论容器- CommentsFeedView- 评论 View

它在代码中基本上应该是什么样子:

class CommentsContainer extends Component {
    constructor(props) {
        super(props)
        this.state = {
            comments = [],
            loading: false
        }
    }


    componentDidMount() {
        someAjaxCall('get', '/comments')
            .then(data => {
                   this.setState({comments: data, loading: false})
                }).bind(this)
    }

    render() {
        return <CommentsFeedView {...this.state} />
    }
}


const CommentsFeedView = props => {
    return (
        <div>
            {props.comments.map(comment => <CommentView {...comment} />}
        </div>
    )
}

const CommentView = props => {
    return (
        <div>
            <h4>{props.title}</h4>
            <p>{props.content}</p>
        </div>
    )
}

如果您想创建嵌套 map ，您需要改变您的思维方式。将组件视为呈现内容的黑匣子。可能有更复杂的组件，也可能更少。渲染其他组件和一个衬垫的组件。

所以这是一个示例，就像您的问题代码一样:

class UsersCommentsFeed {
    render() {
        return (
           {this.props.users.map(user => <SingleUserComments {...user} />)}
        )
    }
}

class SingleUserComments {
    render() {
        return (
           {this.props.comments.map(comment => <Comment {...comment} />)}
        )
    }
}

class Comment {
    render() {
        return (
            <div>
               <h2>{this.props.title}</h2>
               <p>{this.props.content}</p>
            </div>
        )
    }
}

正如您在这里看到的，我们并不真正关心 map 或嵌套 map 。每个组件都渲染自己，不关心“外部”