在React，Redux，Api，Postman编程上重复声明“ Main”

Question

我对React redux和api编程完全陌生...我的编码需要您的帮助

我遇到错误

    src/containers/Dashboard/Main/Main.js: Duplicate declaration "Main"
  51 | import { faTh, faListUl } from '@fortawesome/free-solid-svg-icons'
  52 | 
> 53 | function Main(props) {
     |          ^
  54 |   useEffect(()=>{
  55 |     props.onGetCampaign()
  56 |   },[])

这是我的代码：

manage / src / index.js

import React from 'react';
import ReactDOM from 'react-dom';
import { BrowserRouter } from 'react-router-dom'
import { detect } from "detect-browser"

import { createStore, applyMiddleware, compose, combineReducers } from "redux";
import thunk from 'redux-thunk'
import { Provider } from 'react-redux'

import App from './App';
import Unsupport from './components/UI/Unsupport'

import * as serviceWorker from './serviceWorker';
import Campaign from './store/reducers/Campaign'

const composeEnhancers = process.env.NODE_ENV === "development" ? window.__REDUX_DEVTOOLS_EXTENSION_COMPOSE__ || compose : compose;

const rootReducer = combineReducers({
 Campaign: Campaign, 
});

const store = createStore(
    rootReducer,
    composeEnhancers(applyMiddleware(thunk))
);

const browser = detect();
if (browser) {
    console.log(browser.name);
}
// handle the case where we don't detect the browser
let app = null
switch (browser && browser.name) {
    case 'chrome':
    // case 'firefox':
        app = <App />
        break;
    default: app = <Unsupport />

}
ReactDOM.render(
    <Provider store={store}>
        <BrowserRouter>
            {app}
        </BrowserRouter>
    </Provider>, document.getElementById('root'));
serviceWorker.unregister();

manage / src / containers / Dashboard / Main / Main.js

import React,{useEffect} from 'react'
import {connect} from 'react-redux'
import * as actions from '../../../store/actions/index'
import classes from './Main.module.scss'
import { NavLink, Switch, Route, withRouter } from 'react-router-dom'
import Main from '../../../components/Dashbord/Main/Campaing/Campaing'

import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import { faTh, faListUl } from '@fortawesome/free-solid-svg-icons'

function Main(props) {
  useEffect(()=>{
    props.onGetCampaign()
  },[])

  return (
    <div className={classes.Main}>
        <h3 className={classes.Heading}>DASHBOARD</h3>
        <div className={classes.NavPanel}>
            <NavLink exact to="/" activeClassName={classes.active}>upcomming campaigns</NavLink>
            <NavLink to="/past" activeClassName={classes.active}>past campaigns</NavLink>
        </div>

    </div>
  )
}
const mapStateToProps=state=>{
  return{
    campaign:state.campaign.campaign
  }
}
const mapDispatchToProps=dispatch=>{
  return{
    onGetCampaign:()=>dispatch(actions.getCampaign())
  }
}
export default connect(mapStateToProps,mapDispatchToProps)(Main)

manage / src / store / actions / Campaign.js

import * as actions from './actionTypes'
import axios from '../../axios'

//get campaigns

export const initGetCampaign = () => {
    return {
        type: actions.GET_CAMPAIGN_INIT
    }
}

export const failGetCampaign = () => {
    return {
        type: actions.GET_CAMPAIGN_FAIL
    }
}
export const successGetCampaign = (data) => {
    return {
        type: actions.GET_CAMPAIGN_SUCCESS,
        data
    }
}
export const getCampaign = () => {
    return dispatch => {
        const token=localStorage.getItem('manage-token')

        dispatch(initGetCampaign())

        axios.get('campaigns/', {
            headers: {
                Authorization: `token ${token}`
            }
        }).then(res=>{
            dispatch(successGetCampaign(res.data))
            console.log(res.data);

        }).catch(err=>{
            dispatch(failGetCampaign())
            console.log(err);
        })
    }
}

manage / src / store / reducers / Campaign.js

import * as actions from '../actions/actionTypes'

const initialState = {
    loading: false,
    message: "",
    error: false,
    success: false,
    campaignList: null,
    getCampaign: null
}

const reducer = (state = initialState, action) => {
    switch (action.type) {
        case actions.GET_CAMPAIGN_INIT:
            return {
                ...state,
                loading: true,
                error: false
            }
        case actions.GET_CAMPAIGN_FAIL:
            return {
                ...state,
                loading: false,
                error: true

            }
        case actions.GET_CAMPAIGN_SUCCESS:
            return {
                ...state,
                loading: false,
                campaignList: action.data,
                error: false
            }
        default:
            return state
    }
}
export default reducer

manage / src / store / actions / actionTypes.js

export const
    GET_CAMPAIGN_FAIL="GET_CAMPAIGN_FAIL",
    GET_CAMPAIGN_INIT="GET_CAMPAIGN_INIT",
    GET_CAMPAIGN_SUCCESS="GET_CAMPAIGN_SUCCESS"

manage / src / components / Dashbord / Main / Campaing / Campaing.js

import React,{useEffect,useState} from 'react'
import classes from './Campaing.module.scss'
import axios from '../../../../axios'

function Main() {
    // const [video, setVideo] = useState(null)
    const [main, setMain] = useState(null)



    useEffect(() => {
        const token = localStorage.getItem('manage-token')


        axios.get(`campaigns/`, {
            headers: {
                Authorization: `Token ${token}`
            }
        }).then(res => {
            console.log(res.data.results);
            setMain(res.data.results)

        }).catch(err => {
            console.log(err);

        })




    }, [])
    return (
        <div>
            <h1 className={classes.Header}>
                Dash Board
            </h1>
            {Main
            ?<ul className={classes.List}>
                {main.map(res=>{
                // console.log(res);

                return(
                <li key={res.id}>
                    <span>{res.heading}</span>
                    <p>{res.description}</p>
                    <p>{res.venue}</p>
                    <p>{res.start_time}</p>
                    <p>{res.end_time}</p>
                    <p>{res.sponsors}</p>
                    <p>{res.special_notes}</p>
                    <p>{res.company.name}</p>
                    <a href={res.campaign_url}>Show Campaign</a>
                    </li> 
                )
             })}
            </ul>
            :null} 
        </div>
    )
}

export default Main

Answer 1

由于您要在下面的行中导入此文件，因此导致重复声明。

import Main from '../../../components/Dashbord/Main/Campaing/Campaing'

，您的函数名也为Main。

function Main(props) {

将函数名称更改为其他名称。