'this'在 react 中未定义，用于添加复选框事件

我在反应中遇到了错误，其中this未定义。这是我第一次开发反应应用程序。

在 UI 中，它表示Unhandled Rejection (TypeError): Cannot read property 'setState' of undefined而在控制台中，this的值未定义。

谢谢你的帮助。

以下是现有代码：

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
};
};

'this' 未定义，因为您尚未将组件的上下文绑定到方法。由于您是新手，我建议您浏览 bind，es6 和其他 js 术语等概念，以便您可以更好地编码并避免此类错误。

在这种情况下，您需要通过使用绑定方法或使用作为类函数的 es6 箭头函数来绑定上下文。

在构造函数中添加以下代码，在其中调用此getServerData函数。

getServerData = getServerData.bind(this);

在这里，绑定将返回新方法，该方法将上下文(this)设置为调用类。

最好在类中设置状态，并在该承诺解析函数中。

首先，让我们回答你的问题。thisundefined，因为您使用的是 ES6 模块，并且使用的是箭头函数const getServerData = async (...) => {。

在箭头函数中，this绑定不是动态的，而是词法绑定。这意味着这实际上是指原始上下文(在箭头函数之外)。
在基本的 js 脚本中，这将指向Window全局上下文。但是您使用的是带有导入语句的 ES6 模块。ES6 模块的目标之一是隔离代码。因此，在这样的模块中，没有对全局Window上下文的默认访问，因此您的最终undefined.

现在，在您的代码中可以识别出一些误解。

编写 ES6 模块时，您应该在内部的某个地方有一个 export 语句，以便在外部使用它。
对服务器的请求最好隔离在另一个函数中，这样组件的结构就更容易理解，尤其是在你正在学习 React 的时候。
阅读非常好的 React 文档以了解它的基础知识。
- 定义 React 功能组件时不应使用async
- 由于组件中没有定义状态(导入useState是不够的，您必须使用它：状态钩子文档)，因此不能使用setState.
- this.setState是指使用 React 类语法来定义组件，useState是指使用 State Hooks。不能在同一组件中同时执行这两项操作。你必须选择。

因此，总而言之，您的getServerData函数应该在组件之外，并且不必与状态管理做任何事情。你应该构建一个 React 组件，它将在生命周期方法中调用你的函数。

保持自信，你会比你想象的更早得到它！ ;-)

this.getServerData = this.getServerData.bind(this);

相关内容

最新更新

热门标签：