Question

我在渲染代码时遇到问题。我已经用Provider类包装了我的应用程序，但是在浏览器上却不断出现错误。

下面是我的App.js外观：

import React, { Component } from "react";
import "./App.css";
import ReactDOM from "react-dom";

import axios from 'axios';

import teamContext from "../contexts/teamContext";
import TeamList from "./TeamList";
import TeamForm from "./TeamForm";

const initialState = {
  teamList: [],
  teamForm: {
    name: "",
    age: "",
    height: "",
    id: "",
  }
}

class Provider extends React.Component {
  state = initialState;

  render() {
    return (
      <teamContext.Provider value={{

        state: this.state,

        getMembers: () => {
          axios.get('http://localhost:3000/smurfs')
            .then(res => {
              console.log(res.data);
            })
            .catch(err => {
              console.log(err);
          })
        }
      }}>
        {this.props.children}
      </teamContext.Provider>
    )
  }
}

class App extends Component {
  render() {
    return (

      <Provider className="App">
          <TeamList />
          <TeamForm />
      </Provider>
    );
  }
}

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

export default App;

这是确切的错误消息：

Error: Element type is invalid: expected a string (for built-in components) or a class/function (for composite components) but got: undefined. You likely forgot to export your component from the file it's defined in, or you might have mixed up default and named imports.

Check the render method of Provider.

Answer 1

乍一看代码，似乎您应该将teamContext从驼峰大小写重命名为使用句子大小写TeamContext。

您可能已经从reactjs.org知道这一点：

注意：始终使用大写字母开头组件名称。

React将以小写字母开头的组件视为DOM标签。   例如，<div />代表HTML div标签，而<Welcome />代表一个组件，并且要求Welcome在范围内。

无效的元素类型：需要字符串或类函数

1 个答案: