Question

我有一个非常简单的应用程序，但是它引发了一个错误，我不知道该怎么办。在index.js中，我将App.js添加到DOM中，一切正常，几秒钟后它抛出此错误：

元素类型无效：预期为字符串（对于内置组件）或类/函数（用于复合组件）但得到了：对象。

错误指向index.js行：

ReactDOM.render(<App />, document.getElementById("root"));

我认为App已正确导出。我已经阅读了有关此主题的其他已回答问题，但没有一个帮助我了解我很小的应用程序中发生的情况。拜托，有人知道是什么问题吗？

App.js

function createStore(reducer, initialState) {
  let state = initialState;
  // ...

  const getState = () => state;

  const dispatch = action => {
    state = reducer(state, action);
  };

  return {
    getState,
    dispatch
  };
}

function reducer(state, action) {
  if (action.type === "ADD_MESSAGE") {
    return {
      messages: state.messages.concat(action.message)
    };
  } else {
    return state;
  }
}

const initialState = { messages: [] };

const store = createStore(reducer, initialState);

const addMessageAction1 = {
  type: "ADD_MESSAGE",
  message: "How does it look, Neil?"
};

store.dispatch(addMessageAction1);
const stateV1 = store.getState();

const addMessageAction2 = {
  type: "ADD_MESSAGE",
  message: "Looking good."
};

store.dispatch(addMessageAction2);
const stateV2 = store.getState();

console.log("State v1:");
console.log(stateV1);
console.log("State v2:");
console.log(stateV2);

const App = { createStore, reducer, initialState }; // for tests
export default App;

Index.js

import React from "react";
import ReactDOM from "react-dom";
// some comment
// some comment
// some comment
// some comment
import App from "./App";

import "./index.css";

import "./semantic-dist/semantic.min.css";

ReactDOM.render(<App />, document.getElementById("root"));

首先，我收到此警告消息：

index.js：2178警告：React.createElement：类型无效- 预期的字符串（用于内置组件）或类/函数（用于复合组件），但得到了：对象。在index.js：13上检查代码。

然后出现此错误消息：

未捕获的错误：元素类型无效：预期为字符串（用于内置组件）或类/函数（用于复合组件）但得到：对象。在不变（invariant.js：42）在throwOnInvalidElementType（react-dom.development.js：5390）在createFiberFromElement（react-dom.development.js：5356）在reconcileSingleElement（react-dom.development.js：7972）在reconcileChildFibers（react-dom.development.js：8028）在reconcileChildrenAtExpirationTime（react-dom.development.js：8166）在reconcileChildren（react-dom.development.js：8149）在updateHostRoot（react-dom.development.js：8393）在beginWork（react-dom.development.js：8898）在performUnitOfWork（react-dom.development.js：11708）在workLoop（react-dom.development.js：11731）在HTMLUnknownElement.callCallback（react-dom.development.js：104）在Object.invokeGuardedCallbackDev（react-dom.development.js：142）在invokeGuardedCallback（react-dom.development.js：191）在replayUnitOfWork（react-dom.development.js：11218）在renderRoot（react-dom.development.js：11773）在performWorkOnRoot（react-dom.development.js：12318）在performWork（react-dom.development.js：12239）在performSyncWork（react-dom.development.js：12216）在requestWork（react-dom.development.js：12116）在scheduleWorkImpl（react-dom.development.js：11991）在scheduleWork（react-dom.development.js：11951）在scheduleRootUpdate（react-dom.development.js：12579）在updateContainerAtExpirationTime（react-dom.development.js：12607）在Object.updateContainer（react-dom.development.js：12626）在ReactRoot ../ node_modules / react-dom / cjs / react-dom.development.js.ReactRoot.render （react-dom.development.js：15926）在react-dom.development.js：16345 在Object.unbatchedUpdates（react-dom.development.js：12426）在legacyRenderSubtreeIntoContainer（react-dom.development.js：16341）在Object.render（react-dom.development.js：16409）在Object ../ src / index.js（index.js：13）位于 webpack_require （引导52ea5df7708886ffd661：678）在fn（bootstrap 52ea5df7708886ffd661：88）在Object.0（flags.png：1）位于 webpack_require （引导52ea5df7708886ffd661：678）在bootstrap 52ea5df7708886ffd661：724 在引导程序52ea5df7708886ffd661：724

这是整个错误消息的屏幕（由于我的积分低，我无法直接显示它）： enter image description here

Answer 1

我可以告诉您的主要问题是，脚本中没有呈现任何 React Component 。 React并不希望我们导出将用ReactDOM.render()渲染的对象：

const App = { createStore, reducer, initialState }; // for tests
export default App;

应该呈现为export default并呈现的是是否是 Class组件（我建议将这种类型的组件称为Root App），如下所示：

import React from 'react';

class App extends React.Component {
    render(<div>JSX script here</div>);
}
export default App;

或功能组件，如下所示：

import React from 'react';

const App = () => {
    return (<div>JSX script here</div>);
}
export default App

渲染作为React App的根对象没有任何意义。相反，它希望将反应组件呈现为React App的根。

您可以将其他内容（函数，变量和对象）导出为命名导出，同时还可以导出默认导出。也许看起来像这样：

import React from 'react';

class App extends React.Component {
    render(<div>JSX script here</div>);
}
export default App;

const aFunction = ()=> {};
const anObject = {"key":"value"};
export { aFunction, anObject }

我建议您进一步了解反应组件，ES6 命名导出和默认导出。

Answer 2

我遇到了同样的问题，但是我的解决方案有所不同。似乎有些变量类型混淆了。为了防止这种情况（如果可能），请切换到严格模式。

ReactDOM.render(
  <React.StrictMode>
 
    <App />
  
  </React.StrictMode>,
  document.getElementById('root')
);

ReactApp：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：object

2 个答案: