J'ai rencontré une erreur dans réaction dans laquelle in ui, il indique Merci pour votre aide. P> Voici le code existant: P> ceci code> est indéfini. C'est ma première fois que je développe une application de réagissage. Rejetage non géré (TypeError): impossible de lire la propriété 'SetState' de non défini code> dans la console de Ceci est indéfini. p> import React, { useState, useEffect, useRef } from "react";
//import makeData from "../makeData";
import { useTableState } from "react-table";
import { Button } from "../Styles";
import Table from "../TransactionPanelTable";
// Simulate a server
const getServerData = async ({ filters, sortBy, pageSize, pageIndex }) => {
await new Promise(resolve => setTimeout(resolve, 500));
// Ideally, you would pass this info to the server, but we'll do it here for convenience
const filtersArr = Object.entries(filters);
// Get our base data
let rows = [];
for (let i = 0; i < 1000; i++) {
rows.push({
transaction_seq: 1234,
rec_count: 1234,
user_id: "test",
updated_at: "",
duration: 1.23
});
}
// Apply Filters
if (filtersArr.length) {
rows = rows.filter(row =>
filtersArr.every(([key, value]) => row[key].includes(value))
);
}
// Apply Sorting
if (sortBy.length) {
const [{ id, desc }] = sortBy;
rows = [...rows].sort(
(a, b) => (a[id] > b[id] ? 1 : a[id] === b[id] ? 0 : -1) * (desc ? -1 : 1)
);
}
// Get page counts
const pageCount = Math.ceil(rows.length / pageSize);
const rowStart = pageSize * pageIndex;
const rowEnd = rowStart + pageSize;
// Get the current page
rows = rows.slice(rowStart, rowEnd);
let checkedMap = new Map();
rows.forEach(row => checkedMap.set(row, false)); //preset each to false, ideally w/ a key instead of the entire row
this.setState({ checkedMap: checkedMap });
//handleCheckedChange(row) {
// let modifiedMap = this.state.checkedMap;
// modifiedMap.set(row, !this.state.checkedMap.get(row));
// this.setState({ checkedMap: modifiedMap });
//}
return {
rows,
pageCount
};
};
4 Réponses :
'Ceci' est indéfini car vous n'avez pas limité le contexte du composant sur la méthode. Comme vous êtes nouveau pour réagir, je vous suggérerais de passer par des concepts tels que BIND, ES6 et d'autres lingos JS afin que vous puissiez mieux coder et éviter de telles erreurs.
Dans ce cas, vous devez lier le contexte à l'aide de la méthode Bind ou à l'aide des fonctions de flèche ES6 qui sont des fonctions de classe.
Ajouter ci-dessous Code dans la fonction Constructor où vous appelez cette geterverdata = geterverdata.bind (this);
ici lier retournera nouvelle méthode qui définira le contexte (ceci) à votre classe d'appel.
Il est préférable de définir l'état en classe avec la fonction de la promesse résolue.
Tout d'abord, répondons à votre question. Maintenant, plusieurs idées fausses sont reconnaissables dans votre code.
SO à résumer, votre fonction Restez confiant, vous l'obtiendrez tôt que vous ne le pensez! ; -) Ce est non défini parce que vous utilisez des modules ES6 const geterverdata = async (...) = > {.
non défini . .
async lors de la définition d'un composant fonctionnel réactif
USESTE ne suffit pas, vous devez l'utiliser: State Crows DOC ), vous ne pouvez pas utiliser SSTATE .
this.setstate Reportez-vous à l'aide de Syntaxe de classe de réaction < / a> Pour définir votre composant, usestate se référer à l'utilisation des crochets d'état. Vous ne pouvez pas faire les deux dans un même composant. Vous devez choisir.
geterverdata doit être en dehors de votre composant et ne doit pas avoir à faire quoi que ce soit avec la gestion de l'état. Et vous devez construire un composant réactif qui appellera votre fonction dans une méthode de cycle de vie.
this.getserverdata = ceci.getserverdata.bind (this);
Bienvenue à cela. Nous sommes ici pour aider d'autres utilisateurs quand ils rencontrent des problèmes pour les signaler dans la bonne direction. Nous ne sommes pas là pour résoudre vos bugs, écrivez un nouveau code pour vous. Essayez de google pourquoi vous obtenez une erreur de type. Qu'avez-vous essayé de résoudre votre problème?