Блог

В настоящее время я работаю над проектом, и я хотел добавить в свое приложение разбиение на страницы, чтобы я мог продолжать добавлять продукты в базу данных, и у меня возникла проблема с моим кодированием.

Что я делаю не так и как лучше всего обойти это решение? Имейте в виду, что я уже импортировал свое состояние использования и эффект использования в «реагировать».

 const url = 'https://jsonplaceholder.typicode/posts';  export default function ProductApp() {  const [products, setProducts] = useState([]);  const [error, setError] = useState('');   useEffect(() =gt; {  fetch(url)  .then((response) =gt; {  if (response.ok) return response.json();  throw new Error('opps, something did not work right');  })  .then ((products) =gt; setProducts(products))  .catch((error) =gt; setError(error.message));  }, []);   if (error) return lt;h1gt;{error}lt;/h1gt; };  export default class App extends Component {  constructor(props) {  super(props);    this.state = {  loggedInStatus: "NOT_LOGGED_IN",  user: {}  };    this.handleSignIn = this.handleSignIn.bind(this);  this.handleUnsuccesfulLogin = this.handleUnsuccesfulLogin.bind(this);  this.handleSignOut = this.handleSignOut.bind(this);  }    handleSignIn() {  this.setState({  loggedInStatus: "LOGGED_IN"  });  }    handleUnsuccesfulLogin() {  this.setState ({  loggedInStatus: "NOT_LOGGED_IN"  });  }   handleSignOut() {  this.setState ({  loggedInStatus: "NOT_LOGGED_IN"  });  }    checkLoginStatus() {  return axios  .get("http://localhost:3001/logged_in",   { withCredentials: true })  .then(response =gt; {   const loggedIn = response.data.logged_in;  const loggedInStatus = this.state.loggedInStatus;   if (loggedIn amp;amp; loggedInStatus === "LOGGED_IN") {  return loggedIn;  } else if (loggedIn amp;amp; loggedInStatus === "NOT_LOGGED_IN") {  this.setState ({  loggedInStatus: "LOGGED_IN"  });  } else if (!loggedIn amp;amp; loggedInStatus === "LOGGED_IN") {  this.setState({  loggedInStatus: "NOT_LOGGED_IN"  });  }  })  .catch(error =gt; {  console.log("Error", error);  });  }    componentDidMount() {  this.checkLoginStatus();  }    handleLogout() {  this.setState({  loggedInStatus: "NOT_LOGGED_IN",  user: {}  });  }    handleLogin(data) {  this.setState({  loggedInStatus: "LOGGED_IN",  user: data.user  });  }   render() {  return (  lt;Routergt;  lt;Home /gt;  lt;Switchgt;  lt;Route  exact   path={'/'}  render={props =gt; (  lt;Main  {...props}  handleSignIn={this.handleSignIn}  handleSignOut={this.handleSignOut}  loggedInStatus={this.state.loggedInStatus}  /gt;  )}  /gt;  lt;Route path='/products' component={Products}/gt;  lt;Route path='/contactus' component={ContactUs}/gt;  lt;Route path='/signup' component={SignUp}/gt;  lt;Route path='/signin' component={Login}/gt;  lt;Route  exact  path={"/signin"}  render={props =gt; (  lt;LogOut  {...props}  loggedInStatus={this.state.loggedInStatus}  /gt;  )}  /gt;  {/* lt;Route path='/profile' component={Profile}/gt; */}  lt;/Switchgt;  lt;/Routergt;   );  } }  

Вы не можете выполнить 2 или более экспорта по умолчанию в одном файле.

Что вы можете сделать, так это иметь default export и отдыхать как named exports .

Экспорт по умолчанию экспортируется как

 export default function(){}  

и импортируется как

 import App from "./App.js"  

Именованные экспортные товары экспортируются как

 export function App(){}  

и импортируется как

 import {App} from "./App.js"