渲染没有返回任何内容。这通常意味着缺少 return 语句。或者,不渲染任何内容,返回 null。但应用程序仍然呈现

时间:2021-01-14 03:12:58

标签: reactjs meteor routes flow-router

嗨,我对 Meteor 还很陌生,正在做出反应,并且正在处理客户门户。我已经调整了流星反应教程来工作我需要它如何工作,并且正在使用 Flow Router 进行路由。目前一切正常,除了我仍然收到此错误 Uncaught Error: AppMount(...): Nothing was returned from render. This usually means a return statement is missing. Or, to render nothing, return null.,无论我做什么。

这是我的路由代码以及主主页的大部分代码:

main.jsx

import AppMount from '/imports/ui/AppMount'
import "./routes"

Meteor.startup(() => {
  render(<AppMount />, document.getElementById('root'))
})

AppMount.jsx

const AppMount = props => {
  return (props.content);
}

export default AppMount

App.jsx

const App = () => {

  const user = useTracker(() => Meteor.user());

  const { tasks, isLoading } = useTracker(() => {
    const noDataAvailable = { tasks: [] };

    if (!Meteor.user()) {
      return (noDataAvailable);
    }
    const handler = Meteor.subscribe('tasks');

    if (!handler.ready()) {
      return ({ ...noDataAvailable, isLoading: true });
    }

    const tasks = TasksCollection.find(
      userFilter,
      {
        sort: { status: 1 },
      }
    ).fetch();

    return ({ tasks });

  });


  return(
    <div className="app">
      <Header />

      <div className="main">
        {user ? (
          <Fragment>
            <div className="menu">
              {user.admin && (
                <Fragment>
                  <button className="addUser" onClick={newUser} >
                    Add New User
                  </button>

                  <button className="addTask" onClick={addTask} >
                    Add Task
                  </button>

                </Fragment>
              )}

              <button className="changePass" onClick={changePass} >
                Change Password
              </button>

              <button className="user" onClick={logout} >
                Logout: {user.username}
              </button>

            </div>

            {isLoading && <div className="loading">loading..</div>}

            <ul className="tasks">
              {tasks.map(task => (
                <Task
                  key={task._id}
                  task={task}
                  onCheckboxClick={toggleChecked}
                  onDeleteClick={deleteTask}
                  advanceStage={advanceStage}
                  revertStage={revertStage}
                />
              ))}
            </ul>
          </Fragment>
        ) : (
            <LoginForm />
          )}
      </div>
    </div>
  );
}

export default App

routes.jsx

FlowRouter.route('/', {
  name: 'Home',
  action() {
    mount(AppMount, {
      content: <App />
    })
  }
})

我知道以前有人问过这个问题,但我相信我已经尝试了所有解决方案,但都无济于事。

感谢任何帮助。

1 个答案:

答案 0 :(得分:1)

props.content 需要 {}

const AppMount = props => {
  return {props.content};
}