React中组件默认导出/导入的问题

如何解决React中组件默认导出/导入的问题

我在导出/导入组件时遇到问题。这是我得到的错误：

错误：元素类型无效：预期为字符串（对于内置组件）或类/函数（对于复合组件），但得到：未定义。您可能忘记了从定义文件中导出组件，或者可能混淆了默认导入和命名导入。检查ContactState的渲染方法。

这是我导出的ContactState.js文件（代码似乎很奇怪，因为它距离完成还很远，并且其中包含一些伪数据）。

import React,{ useReducer } from 'react';
import axios from 'axios';
import ContactContext from './contactContext';
import contactReducer from './contactReducer';
import {
  GET_CONTACTS,ADD_CONTACT,DELETE_CONTACT,SET_CURRENT,CLEAR_CURRENT,UPDATE_CONTACT,FILTER_CONTACTS,CLEAR_CONTACTS,CLEAR_FILTER,CONTACT_ERROR
} from '../types';

const ContactState = props => {
  const initialState = {
    contacts: [
      {
        id: 1,name: 'Jill Johnson',email: 'jill@gmail.com',phone: '111-111-1111',type: 'personal'
      },{
        id: 1,name: 'Sara Watson',email: 'sara@gmail.com',phone: '222-222-2222',name: 'Harry White',email: 'harry@gmail.com',phone: '333-333-3333',type: 'professional'
      },]
  }

  const [state,dispatch] = useReducer(contactReducer,initialState);



  // Add contact

  // Delete contact

  // Set current contact

  // Clear current contact

  // Update contact

  // Filter Contact

  // Clear Filter

  return (
    <ContactContext.Provider value = {{ contacts: state.contacts }}>
      { props.children }
    </ContactContext.Provider>
  )
}

export default ContactState;

如您所见，我不会忘记导出任何内容。

这是我导入ContactState的App.js文件：

import React,{ Fragment } from 'react';
import './App.css';
import Navbar from './components/layout/Navbar';
import Home from './components/pages/Home';
import About from './components/pages/About';
import ContactState from './context/contact/ContactState';
import {
  BrowserRouter as Router,Switch,Route,// Link
} from 'react-router-dom';

const App = () => {
  
  return (
    <ContactState>
      <Router>
        <Fragment>
          <Navbar />
          <div className="container">
            <Switch>
              <Route exact path='/' component={ Home } />
              <Route exact path='/about' component={About} />
            </Switch>
          </div>
        </Fragment>
      </Router>
      </ContactState>

  );
}

export default App;

我尝试了一切，但似乎无济于事。我认为问题来自此jsx ContactState标记。

React中组件默认导出/导入的问题

如何解决React中组件默认导出/导入的问题

相关推荐