从反应方法中返回组件答案

【问题标题】：Return component from within a react method从反应方法中返回组件
【发布时间】：2019-02-15 00:09:38
【问题描述】：

我试图让 React 从另一个组件的方法中返回一个组件。到目前为止，我有：

export class Projects extends Component {
    constructor() {
        super();
        this.loadProjects = this.loadProjects.bind(this);
    }

    loadProjects() {
        var userProjectsRef = dbroot.child("users").child(this.props.user.uid).child("projects").ref;
        userProjectsRef.on("child_added", function(snapshot) {
            var id = snapshot.val();
            return (
                <ProjectsRow projectId={id} />
            );
        })
    }

    render() {
        return (
            <div className="container">
                <div className="card">
                    <div className="card-header bg-dark text-light align-center">
                    </div>
                    <ul className="list-group list-group-flush align-left">
                        {this.loadProjects()}
                    </ul>
                </div>
                <AddProjectModal user={this.props.user} />
            </div>
        );
    };
};

我不确定为什么 loadProjects 方法中的 return 语句不起作用。但是，它可以在同一位置返回一个 console.log 语句。我还引用了这个堆栈溢出问题：React. Creating a function that returns html 有什么想法吗？

【问题讨论】：

看起来你有一个返回<ProjectsRow>的异步回调。这不会在相同的上下文中返回。
嗨，Zach，您的退货不能正常工作吗？由于您是 react 新手，我建议您在没有状态的情况下基于事件管理组件是 react 的反模式。

标签： javascript reactjs firebase

【解决方案1】：

将您的项目数据存储在state 中，您可以在添加项目时更新状态。这样，您可以.map() 渲染函数中的状态，React 会在您添加项目时自动继续调用。

export class Projects extends Component {
    constructor() {
        super();

        // set initial empty state
        this.state = {
          projects : []
        };
    }

    // do the state manipulation after the component has mounted
    componentDidMount() {
        var userProjectsRef = dbroot.child("users").child(this.props.user.uid).child("projects").ref;
        userProjectsRef.on("child_added", function(snapshot) {
            var id = snapshot.val();
            const newProject = {id :id};

            // update the state and add the new project
            this.setState((prevState) => ({
              ...prevState, // not needed in this trivial example but would be needed if the state stored other things because setState overwrites the whole state
              projects : [...prevState.projects, newProject] // the updated project is array is the existing array with the new one appended
            }));
        }.bind(this)); // bind this context because the function creates its own this context (or switch to an arrow function)
    }

    // map this.state.projects to <ProjectsRow> components
    render() {
        return (
            <div className="container">
                <div className="card">
                    <div className="card-header bg-dark text-light align-center">
                    </div>
                    <ul className="list-group list-group-flush align-left">
                        {this.state.projects.map((project, index) => <ProjectsRow key={index} projectId={project.id} />)}
                    </ul>
                </div>
                <AddProjectModal user={this.props.user} />
            </div>
        );
    };
};

【讨论】：