Problema de análisis sintáctico con 2 exportaciones predeterminadas diferentes.
Actualmente estoy trabajando en un proyecto y quiero agregar paginación en mi aplicación para poder seguir agregando productos en la base de datos, pero he encontrado un problema en mi codificación.
¿Qué estoy haciendo mal y cuál es la mejor solución para este problema? Tenga en cuenta que ya he importado mi useState y useEffect en ‘react’.
“`const url = ‘https://jsonplaceholder.typicode/posts’;
export default function ProductApp() {
const [products, setProducts] = useState([]);
const [error, setError] = useState('');
useEffect(() => {
fetch(url)
.then((response) => {
if (response.ok) return response.json();
throw new Error('opps, algo no funcionó correctamente');
})
.then ((products) => setProducts(products))
.catch((error) => setError(error.message));
}, []);
if (error) return
<h1>{error}</h1>
;
};
export default class App extends Component {
constructor(props) {
super(props);
this.state = {
loggedInStatus: "NOT_LOGGED_IN",
user: {}
};
this.handleSignIn = this.handleSignIn.bind(this);
this.handleUnsuccessfulLogin = this.handleUnsuccessfulLogin.bind(this);
this.handleSignOut = this.handleSignOut.bind(this);
}
handleSignIn() {
this.setState({
loggedInStatus: "LOGGED_IN"
});
}
handleUnsuccessfulLogin() {
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 => {
<pre><code> const loggedIn = response.data.logged_in;
const loggedInStatus = this.state.loggedInStatus;
if (loggedIn && loggedInStatus === "LOGGED_IN") {
return loggedIn;
} else if (loggedIn && loggedInStatus === "NOT_LOGGED_IN") {
this.setState ({
loggedInStatus: "LOGGED_IN"
});
} else if (!loggedIn && loggedInStatus === "LOGGED_IN") {
this.setState({
loggedInStatus: "NOT_LOGGED_IN"
});
}
})
.catch(error => {
console.log("Error", error);
});
</code></pre>
}
componentDidMount() {
this.checkLoginStatus();
}
handleLogout() {
this.setState({
loggedInStatus: "NOT_LOGGED_IN",
user: {}
});
}
handleLogin(data) {
this.setState({
loggedInStatus: "LOGGED_IN",
user: data.user
});
}
render() {
return (
<router>
<home></home>
<switch>
<route exact="" path="{'/'}" render="{props" ==""> (
<main {…props}="" handlesignin="{this.handleSignIn}" handlesignout="{this.handleSignOut}" loggedinstatus="{this.state.loggedInStatus}"></main>
)}
/>
<route path='/products' component="{Products}/">
<route path='/contactus' component="{ContactUs}/">
<route path='/signup' component="{SignUp}/">
<route path='/signin' component="{Login}/">
<route exact="" path="{"/signin"}" render="{props" ==""> (
<logout {…props}="" loggedinstatus="{this.state.loggedInStatus}"></logout>
)}
/>
{/* <route path='/profile' component="{Profile}/"> */}
</route></route></route></route></route></route></route></switch>
</router>);
}
}“`
davy.ai
No está claro en el fragmento de código qué parte del código está relacionada con la paginación. Sin embargo, parece haber algunos problemas con el código en general:
Para la paginación, deberá modificar el gancho useEffect para recuperar solo un conjunto específico de datos en función del número de página actual y la cantidad de elementos por página. Puede pasar esta información como props desde el componente padre al componente hijo que muestra los productos.
La URL de búsqueda también debe modificarse para incluir el número de página y los criterios de elementos por página.
Por ejemplo, si desea recuperar solo 10 elementos por página, puede modificar la URL de la siguiente manera:
Donde pageNumber es el número de página actual.
Faltan algunas partes del código, como los componentes Products, ContactUs, SignUp y Login, así como los componentes Main y LogOut.
Sin ver la base de código completa, es difícil proporcionar una solución integral. Sin embargo, algunas posibles soluciones alternativas para el problema de la paginación podrían incluir:
Usar una biblioteca de paginación de terceros, como react-paginate o react-js-pagination, para manejar la lógica de paginación.
Implementar un componente de paginación personalizado que maneje la lógica de paginación de forma programática. Esto implicaría modificar el gancho useEffect para recuperar solo los datos necesarios en función del número de página actual y los elementos por página, y pasar estos datos al componente hijo que muestra los productos.
Almacenar todos los datos recuperados en el estado del componente y usar funciones de corte y asignación para mostrar solo los datos necesarios en función del número de página actual y los elementos por página. Esto evitaría hacer solicitudes API adicionales para cada página, pero puede generar problemas de rendimiento si el conjunto de datos es muy grande.