当前位置: 首页 > 知识库问答 >
问题:

如何修复:警告:函数作为React子级无效

索令
2023-03-14

我已经更新了我的路由器,以接受第二条主要路线。

import React from 'react';
import { Router, Route, IndexRoute, browserHistory } from 'react-router';

// Containers & Pages
// Home
import HomePage from '/imports/ui/pages/home/HomePage.js';

// Accounts
import SignUp from '/imports/ui/pages/accounts/SignUp.js';
import Login from '/imports/ui/pages/accounts/Login.js';
import ForgotPassword from '/imports/ui/pages/accounts/ForgotPassword.js';
import ResetPassword from '/imports/ui/pages/accounts/ResetPassword.js';
import PaymentPage from '/imports/ui/pages/accounts/PaymentPage.js';
import CouponPaymentPage from '/imports/ui/pages/accounts/CouponPaymentPage.js';
import AccountPage from '/imports/ui/pages/accounts/AccountPage.js';

// General
import AppContainer from '/imports/ui/containers/AppContainer.js';

// In App
import DashboardContainer from '/imports/ui/containers/app/DashboardContainer.js';
import AllRecipesContainer from '/imports/ui/containers/app/AllRecipesContainer.js';

// Legal
import PrivacyPage from '/imports/ui/pages/legal/PrivacyPage.js';
import TermsPage from '/imports/ui/pages/legal/TermsPage.js';
import DisclaimersPage from '/imports/ui/pages/legal/DisclaimersPage.js';

// Admin
import AdminContainer from '/imports/ui/containers/AdminContainer.js';
import UsersAdminContainer from '/imports/ui/containers/UsersAdminContainer.js';
import RecipeStatsPage from '/imports/ui/pages/admin/RecipeStatsPage.js';

// Routes
export const renderRoutes = () => (
  <Router onUpdate={() => window.scrollTo(0, 0)} history={browserHistory}>
    <Route path="/" component={AppContainer}>
      <IndexRoute name="Home" component={HomePage} />
      <Route name="Sign Up" path="/signup" component={SignUp} />
      <Route name="Log In" path="/login" component={Login} />
      <Route name="Forgot Password" path="/forgotpassword" component={ForgotPassword} />
      <Route name="Reset Password" path="/reset-password/:token" component={ResetPassword} />
      <Route name="Coupon Payment Page" path="/coupons/:code" component={CouponPaymentPage} />
      <Route name="Privacy Page" path="/privacy" component={PrivacyPage} />
      <Route name="Terms" path="/terms" component={TermsPage} />
      <Route name="Disclaimers" path="/disclaimers" component={DisclaimersPage} />
      <Route name="Payment" path="/payment" component={PaymentPage} />
      <Route name="Dashboard" path="/dashboard" component={DashboardContainer} />
      <Route name="Browse All Recipes" path="/browseall" component={AllRecipesContainer} />
      <Route name="Manage Account" path="/account" component={AccountPage} />
    </Route>
    <Route path="/manager" component={AdminContainer}>
      <IndexRoute name="manager home" component={UsersAdminContainer} />
      <Route path="/manager/recipes" component={RecipeStatsPage} />
    </Route>
  </Router>
);

当我在我的应用程序中导航到“/manager”时,我得到一个错误:

警告:函数作为React子级无效。如果您返回一个组件而不是从render返回,可能会发生这种情况。或者你想调用这个函数而不是返回它。在未知(由RouterContext创建)在路由器的RouterContext(由路由器创建)中

// AdminContainer.js

import { Meteor } from 'meteor/meteor';
import { withTracker } from 'meteor/react-meteor-data';
import Admin from '/imports/ui/layouts/Admin.js';

export default withTracker(() => {
  const userHandle = Meteor.subscribe('users.myData');
  const loading = !userHandle.ready();
  return {
    user: Meteor.user(),
    loading,
  };
}, Admin);

//UsersAdminContainer.js

import { Meteor } from 'meteor/meteor';
import { withTracker } from 'meteor/react-meteor-data';
import UsersAdminPage from '/imports/ui/pages/admin/UsersAdminPage.js';

export default withTracker(() => {
  const usersHandle = Meteor.subscribe('users.allUsers');
  const loading = !usersHandle.ready();
  return {
    loading,
    users: Meteor.users.find().fetch(),
  };
}, UsersAdminPage);

我已经尝试导入UsersAdminPage并将其用于indexroute的组件。我已经了解了这个答案(函数作为React子函数是无效的。如果返回组件而不是从渲染返回,可能会发生这种情况)。我没有看到我的错误,任何帮助都将不胜感激。

// package.json

{
  "name": "-",
  "version": "0.0.1",
  "private": true,
  "scripts": {
    "start": "meteor --settings dev-settings.json"
  },
  "dependencies": {
    "autoprefixer": "^7.1.1",
    "babel-runtime": "^6.26.0",
    "bcrypt": "^1.0.3",
    "bluebird": "^3.5.1",
    "contentful": "^5.1.3",
    "marked": "^0.3.6",
    "meteor-node-stubs": "~0.2.4",
    "moment": "^2.21.0",
    "prop-types": "^15.6.0",
    "radium": "^0.19.6",
    "react": "^16.1.1",
    "react-async-script-loader": "^0.3.0",
    "react-burger-menu": "^2.1.11",
    "react-document-title": "^2.0.3",
    "react-dom": "^16.1.1",
    "react-feather": "^1.0.7",
    "react-flatpickr": "^3.6.3",
    "react-router": "^3.0.5",
    "react-stripe-elements": "^1.2.1",
    "react-tooltip": "^3.4.0",
    "reactable": "github:vladnicula/reactable",
    "sib-api-v3-sdk": "^3.1.6",
    "simpl-schema": "^0.3.2",
    "stripe": "^5.5.0",
    "sweetalert": "^2.0.8",
    "sweetalert2": "^7.1.2",
    "underscore": "^1.8.3"
  },
  "devDependencies": {
    "@meteorjs/eslint-config-meteor": "^1.0.5",
    "babel-eslint": "^7.2.3",
    "eslint": "^4.4.1",
    "eslint-config-airbnb": "^15.1.0",
    "eslint-import-resolver-meteor": "^0.4.0",
    "eslint-plugin-import": "^2.7.0",
    "eslint-plugin-jsx-a11y": "^5.1.1",
    "eslint-plugin-meteor": "^4.0.1",
    "eslint-plugin-react": "^7.2.1"
  },
  "postcss": {
    "plugins": {
      "postcss-easy-import": {
        "extensions": [
          ".css",
          ".scss",
          ".import.css"
        ]
      },
      "autoprefixer": {
        "browsers": [
          "last 2 versions"
        ]
      }
    }
  },
  "eslintConfig": {
    "parser": "babel-eslint",
    "parserOptions": {
      "allowImportExportEverywhere": true,
      "allowAfterThis": true
    },
    "plugins": [
      "meteor"
    ],
    "extends": [
      "airbnb",
      "plugin:meteor/recommended"
    ],
    "settings": {
      "import/resolver": "meteor"
    },
    "rules": {
      "import/extensions": [
        "off",
        "never"
      ],
      "import/no-extraneous-dependencies": "off",
      "import/prefer-default-export": "off",
      "import/no-absolute-path": "off",
      "react/prefer-stateless-function": "off",
      "react/jsx-filename-extension": "off",
      "react/forbid-prop-types": "off",
      "react/require-default-props": "off",
      "no-underscore-dangle": "off",
      "jsx-a11y/no-static-element-interactions": "off",
      "class-methods-use-this": "off"
    }
  }
}

共有1个答案

澹台承载
2023-03-14

您对<code>和跟踪器<code>的调用不正确。他们应该将组件传递到<code>的结果,并使用跟踪器<code>:

export default withTracker(() => {
  const userHandle = Meteor.subscribe('users.myData');
  const loading = !userHandle.ready();
  return {
    user: Meteor.user(),
    loading,
  };
})(Admin);

相关文档在这里。

 类似资料:
  • 我是React新手,在Hooks的帮助下,我正在React中开发简单的CRUD应用程序。< br >该应用程序有两个表单组件< code>AddUserForm和< code>EditUserForm,它们相应地添加和编辑用户列表。还有一个显示用户列表的组件(但是我没有得到警告)。< br >一切正常,但是我的浏览器控制台中出现以下警告消息:< br>

  • 我正在用回复写一个 HOC。当我要返回类与 HOC 我得到一个警告在控制台说 函数作为React子级无效。如果您返回一个组件而不是< code >,可能会发生这种情况 我将为模式添加click处理程序,使其能够关闭。另外,我将从错误中得到消息,我已经将其作为第二个函数的参数传递给了模态中的show。

  • 好的,所以我加载根网址。应该呈现一个帖子列表,相反,我得到了臭名昭着的React错误...... index.js和app.js似乎可以正确呈现。我相信故障出在PostList组件,也许是render方法?我知道解决方法可能很简单,但我看不出来。 index.js 应用.js post-list.js

  • 我有一个针对Android9的应用程序,我注意到在Google Play发布前的报告中有一个新的部分叫做Android兼容性。这个新的部分列出了与使用不受支持的API有关的警告或错误。以下是问题之一,并作为greylisted API列出。有人能解释一下在这种情况下哪个是不受支持的API吗?使用似乎来自Android支持库,而不是我的代码。

  • 我正在尝试使用此自定义钩子,从路由中为我带来本地消息。 因此,当我尝试从应用程序中的这个钩子调用“handleMessage”函数时。js组件,出现以下警告:警告:函数作为React子函数无效。如果返回组件而不是从渲染返回组件,则可能会发生这种情况。或者你想调用这个函数而不是返回它。 有我的App.js: 我能做些什么来解决这个问题?

  • 我正在运行gstreamer命令,以使用以下命令从终端播放mp3: gst-launch-1.0-v filesrc location=/主页/用户/歌曲/歌曲。mp3!疯狂的音频转换!音频重采样!自动音频接收器 我收到下面的错误,mp3没有播放 警告:错误的管道:没有元素“mad” sudo apt get install gstreamer1.0-plugins-good gstreamer1