在render React和Typescript中，this.state为空
意味着组件的初始状态为空。在React中，组件的状态是通过state对象来管理的，state包含了组件的数据。当组件被渲染时，可以通过this.state来访问组件的状态。
在React中，当组件的状态发生变化时，会触发组件的重新渲染。在初始渲染时，如果this.state为空，可能有以下几种情况：
- 组件没有定义初始状态：在组件的构造函数中，可以通过this.state来定义组件的初始状态。如果没有定义初始状态，this.state将为空。
- 组件的初始状态被修改：在组件的生命周期方法中，可以通过调用this.setState()方法来修改组件的状态。如果在初始渲染时，this.state为空，可能是因为没有在构造函数或其他生命周期方法中修改过组件的状态。
- 组件没有使用状态：并不是所有的组件都需要使用状态。如果组件没有定义状态，或者没有使用this.state来渲染组件，那么this.state将为空。
在React中，可以通过以下方式来处理this.state为空的情况：
- 定义初始状态：在组件的构造函数中，使用this.state来定义组件的初始状态。例如：
- 定义初始状态：在组件的构造函数中，使用this.state来定义组件的初始状态。例如：
- 修改组件的状态：在组件的生命周期方法或事件处理函数中，使用this.setState()方法来修改组件的状态。例如：
- 修改组件的状态：在组件的生命周期方法或事件处理函数中，使用this.setState()方法来修改组件的状态。例如：
- 使用默认值：可以在组件的render方法中，使用默认值来处理this.state为空的情况。例如：
- 使用默认值：可以在组件的render方法中，使用默认值来处理this.state为空的情况。例如：
总结起来，当在render React和Typescript中，this.state为空时，可能是因为组件没有定义初始状态、组件的初始状态没有被修改，或者组件没有使用状态。可以通过定义初始状态、修改组件的状态或使用默认值来处理这种情况。
相关·内容
我正在使用Typescript遵循Facebook react教程。然而，这是我第一次使用react和typescript。我想把一个onClick事件传递给'Square‘类，这个类使用typescript实现了一个状态和属性接口。
如何使这个Square类能够接受我的onClick事件并按预期触发它？正在与语法sugar作斗争。
import * as React from 'react';
interface MyProps {
value?: string;
}
interface MyState {
value?: string;
浏览 2提问于2017-03-27得票数 1
从draft-js文档中，可以(在vanilla React中，没有typescript)设置Draft-js环境，注意onChange属性可以直接在构造函数中声明：
import React from 'react';
import ReactDOM from 'react-dom';
import {Editor, EditorState} from 'draft-js';
class MyEditor extends React.Component {
constructor(props) {
super(props);
浏览 2提问于2016-05-18得票数 21
回答已采纳
在react文档中的一段代码中，在this.state ()中定义的值在render()中用作
{this.state.name}
但是当我使用typescript实现react代码时，它给出的错误如下：-
Property 'age' does not exist on type 'Readonly<{}>'.
打字稿中的代码是：-
import * as React from "react";
class App2 extends React.Component{
constructor(props:any)
{
浏览 3提问于2018-07-17得票数 2
回答已采纳
我正在使用react和typescript构建富文本编辑器，但我得到了错误，我已经附加在快照中，我还粘贴了我的EditorState.tsx代码 ? 所以你能告诉我为什么我收到这个错误吗？ import React, {Component} from 'react';
import { render } from 'react-dom';
import {EditorState} from "draft-js";
import {Editor} from "react-draft-wysiwyg";
type MyProp
浏览 45提问于2021-11-23得票数 1
2回答
我试图使用TypeScript和Material的组件进行交互。不幸的是，我遇到了这样的错误：
属性'openToYearSelection‘在'IntrinsicAttributes & IntrinsicClassAttributes & Readonly<{子代？：ReactNode；}> .’类型中不存在。
import * as React from 'react';
import DatePicker from 'material-ui/DatePicker';
interface IState
浏览 0提问于2018-05-03得票数 6
我想知道如何将JSX (如"div“或"span")传递给我自己的组件。因此，我尝试使用React.ReactType来支持两者。我的代码如下所示：
LazySvgIcon.tsx
import * as React from 'react'
interface Props {
src: string
loading?: React.ReactType
error?: React.ReactType
}
interface State {
isLoading: boolean,
hasError: boolean
}
expor
浏览 0提问于2019-01-29得票数 0
使用TypeScript，在React组件上有一个可选的状态参数，即使在进行空检查之后也会出现以下错误：
属性'length‘在类型'never’上不存在。
为什么items在返回never后仍被推断为never类型
interface TestProps {
someProp: string;
}
interface TestState {
items?: { id: string; name: string; }[];
}
class Test extends Component<TestProps, TestState> {
state
浏览 0提问于2018-05-14得票数 0
我遇到过preact中的onChange事件无法工作的问题。不过，在react中，一切工作正常。onInput也不能工作。
必须工作的哑代码示例(preact + typescript)
export class Download extends React.Component<DownloadProps, {}> {
constructor(props: DownloadProps) {
super(props);
this.state = {
imgSrc: ''
};
}
public componentDid
浏览 4提问于2017-02-03得票数 1
回答已采纳
我收到来自TypeScript的this.checked和this.disabled createRefs的this.disabled消息。另外，在最后一行，我还收到了来自TS的Property 'checked' does not exist on type 'Switch警告。如何修复这些警告？ interface Props {
checked: boolean;
onChange: (checked: boolean) => void;
disabled?: boolean;
}
interface States {
checked:
浏览 51提问于2020-09-30得票数 0
从JavaScript切换到TypeScript后，我得到以下错误：
类型‘ <{}>上不存在ReadOnly属性
在此代码中：
this.state.flashcards
我似乎需要将flashcards定义为一种类型，但当我将flashcards: []更改为flashcards: any[]时，它会给出一个错误，即任何值都被用作值。
我如何才能像在TypeScript中一样在JavaScript中编译它呢？
import React from 'react';
import Flashcard from './Flashcard';
con
浏览 4提问于2020-08-17得票数 0
回答已采纳
我是ReactJS的新手。我正在看一个用ES6 JavaScript录制的教程，同时我也在尝试用TypeScript重新创建同样的应用(我也是TypeScript的新手！！)。在ES6中，如果特定组件需要维护自己的状态，则需要使用基于类的方法。我已经安装了"babel-plugin-transform-class-properties"，所以我在ES6中将状态设置为export default class SomeClass { state = { someProperty : someValue }}。但在TypeScript中，我对每个组件都使用基于类的方法。下面是一个试图
浏览 17提问于2018-02-17得票数 3
回答已采纳
我正在尝试在React TypeScript文件中实现这一点： export class MainInfo extends Component<IProps>{
continue = e => {
e.preventDefault();
this.props.nextStep();
};
render() {
const { values1, handleChange } = this.props
return (
<div>
<Formik
validateOn
浏览 575提问于2020-04-17得票数 8
我正在尝试用typescript编写一个React HOC，但是我没有得到正确的定义。我不确定我试图实现的目标是否可能实现。
以下是我的代码
import * as React from 'react'
export default function Ajax<Props, State>(InnerComponent: typeof React.Component): React.ComponentClass<Props & State> {
return class extends InnerComponent<Props &
浏览 2提问于2017-04-07得票数 2
2回答
下面是一个用Javascript实现的简单的React App组件。 import React, { Component } from 'react';
import logo from './logo.svg';
import './App.css';
class App extends Component {
constructor(props) {
super(props);
this.state = {
setting: "def",
limit: 2
}
}
浏览 40提问于2019-12-20得票数 1
回答已采纳
export class Dashboard extends React.Component<DashboardProps, IMonthlyCommission>{
constructor(props) {
super(props);
this.state = {};
}
componentWillMount() {
request.get("AffiliateCommissionStatement/GetCommissionDetails").send().end((err, res)
浏览 1提问于2017-06-12得票数 0
每次在React中处理内部组件状态时，我必须首先为状态属性定义空对象，否则将在运行时出现抛出this.state is undefined的错误
如果我要这么做：
render() {
const { someProperty } = this.state;
render <div>{someProperty}</div>
}
我会出错的。
但是解决方法很简单：
constructor(props) {
super(props);
this.state = {};
}
然而，对于我创建的每个组件，一遍又一遍地做这件事是非常烦人的。
有没有可能全局强制
浏览 1提问于2017-08-02得票数 6
回答已采纳
我为我的应用程序实现了一个react上下文结构，它正确地工作，并更改了我定义的状态。但是主要的问题是UI组件(其中我有我的使用者)没有重新呈现。下面是我在TypeScript中的代码：
class Home extends Component<any, any> {
render() {
return (
<DataProvider>
<MainComponent />
</DataProvider>
);
}
}
我的背景：
import React, { Component }
浏览 1提问于2019-07-31得票数 0
回答已采纳
我有一个react组件，它在JavaScript中很好地工作，我想把它转换成TypeScript，但是我得到了一个错误：Property '_title' does not exist on type 'FormComp'。该组件类似于：
class FormComp extends React.Component<{}> {
constructor(props: any) {
super(props);
this.state = {};
}
handleCreate(event: any) {
event.preventDef
浏览 5提问于2022-06-26得票数 0
回答已采纳
1回答
下面是我的react组件结构(使用TypeScript)：
-App.tsx
-NewRequestForm.tsx
-EmployeeInfo.tsx
-AssetInfo.tsx
我正在尝试在EmployeeInfo & AssetInfo中导入NewRequestForm，但是当使用导入语句时，这两个组件都是不可见的，但是我可以看到Prop &State接口。
请建议如何在我的NewFormRequest.tsx中导入子组件
AssetInfo.tsx (child1)
import * as React from 'react
浏览 1提问于2018-07-27得票数 7
回答已采纳
这是我的全部密码。
import React, { Component } from 'react';
import './App.css';
var Chart = require('./Chart');
class App extends React.Component {
componentDidMount() {
this.setState({
data1: [
{id: '5fbmzmtc', x: 7, y: 41, z: 6},
{id: &#
浏览 1提问于2017-11-06得票数 0
我有一个带有一些怪癖的TypeScript组件，我很想将它们转换成一个功能组件，并使用新的React。
我有用符号的私人功能，
构造函数和默认道具，
还有一个简单的渲染功能。
interface IProps {
initialCount?: number;
}
interface IState {
count: number;
}
const increment = Symbol();
class Counter extends React.Component {
constructor(props)
super(props);
this.state = {
浏览 0提问于2019-06-12得票数 0
回答已采纳
新手问题
我在Javascript中有一个示例Javascript脚本，其中有一个translated到Typescript。没有太多的“任何”类型，有没有更短的方式？
Javascript版本：
const App = ({title}) => (
<div>{title}</div>
);
ReactDOM.render(
<App title="Xamarin" />,
document.getElementById("root"),
);
我的打字稿尝试：
interface IApp {
浏览 0提问于2019-10-28得票数 0
回答已采纳
我正在尝试将应用程序转换为使用typescript进行反应。我让它在普通的ES2015中正常运行。但现在我已经将typescript添加到图片中，gulp在尝试编译我的.tsx文件时抛出错误：
error TS2339: Property 'setState' does not exist on type 'App'.
即使是精简的测试组件也会失败，出现以下错误：
error TS2605: JSX element type 'App' is not a constructor function for JSX elements.
Type
浏览 21提问于2019-07-16得票数 0
我呈现来自App.js的唯一组件，如下所示： export default class App extends React.Component {
constructor(props) {
super(props);
this.state = {gameState: "Menu"};
}
render() {
return (
<div>
{<MenuCanvas/> && this.state === {gameState: "Menu"}}
</div>
)
}
浏览 42提问于2020-01-23得票数 1
回答已采纳
我正在尝试通过addTask方法在tasks数组中添加一个任务对象，该方法获取之前的状态并添加新任务，它适用于JSX，但不适用于我使用TypeScript的情况。我得到的错误是 Type 'ITask[] | undefined' is not an array type or a string type. Use compiler option '--downlevelIteration' to allow iterating of iterators. TS2569 import React, { Fragment } from 'react&#
浏览 26提问于2020-04-14得票数 2
回答已采纳
我不知道hwo来修复这行调用上下文提供程序。如果我在那里设置这个状态值，它就会显示出undefind。如何解决这个问题？
错误:
context.tsx
import React, { Component } from 'react'
import { createContext } from 'react';
const Context = React.createContext('text');
//called context into Provider
export class Provider extends Component
浏览 7提问于2022-09-14得票数 1
1回答
我是TypeScript的新手，我有一个事件，我需要知道选择它的元素，这样我就可以在页面上移动另一个元素，但是我很难让它在React中工作。
以下是我到目前为止所拥有的：
import React from "react";
import './BenefitHeader.css';
import BenefitType from "./BenefitType";
import BenefitSelectIndicator from './BenefitSelectIndicator';
interface State {
浏览 1提问于2022-03-09得票数 1
回答已采纳
当我在这个问题上进行搜索时，我只能找到在方法体中的某个地方直接修改this.state的问题，而不是使用this.setState()。我的问题是，我想在构造函数中设置一个启动状态，如下所示：
export default class Square extends React.Component<any, any> {
constructor(props: any) {
super(props);
this.state = {
active: false
};
}
public render() {
...
}
}
应用
浏览 0提问于2018-06-28得票数 41
回答已采纳
在现代JS中，我们可以直接为React组件设置初始状态，如下所示：
class App extends React.Component {
state = {value: 10}
render() {
return <div>{this.state.value}</div>
}
}
当我尝试使用Typescript执行此操作时，TSLint说“类属性'state‘必须标记为'private’、'public‘或'protected'”。如果我将其设置为“私有”，林特将在App上报告Class 'App
浏览 2提问于2018-10-11得票数 12
回答已采纳
我有一个自定义组件，它需要访问我的一个实际组件状态(行)。我在我的构造函数中定义了它，但是当它应该被呈现时，this.state似乎总是空的，我不知道为什么……
控制台始终显示为undefined this.state。
下面是我的代码：
export class TableContainer extends React.Component<any, any> {
constructor(props : any, context: any) {
super(props,context);
this.state = {
浏览 0提问于2017-07-26得票数 2
我有一个反应应用程序。我正在使用react和react-router。。
我有这样一个App.js文件：
import React, { Component } from 'react';
import { BrowserRouter, Route } from 'react-router-dom';
import Items from './Items';
class App extends Component {
constructor(props) {
super(props);
this.state = {
浏览 0提问于2018-10-13得票数 0
回答已采纳
我有一个TypeScript反应视频组件，我想玩点击。我希望通过使用点击处理程序来做到这一点，该处理程序通过ref访问视频并调用.play()，但是我得到了这个错误：
TS2339: Property 'play' does not exist on type 'RefObject<HTMLVideoElement>'.
下面是我的代码(省略了不相关的部分)：
class FullBleedVideo extends React.Component<PropDef, StateDef> {
private fullBleedVideo
浏览 0提问于2018-11-05得票数 7
回答已采纳
我对TypeScript相当陌生，已经收到了一个基于ES6的react项目，并且希望迁移到TypeScript以获得更完整的状态。跟在(这个)之后的任何事情。似乎出现错误(属性"foo“在”bar“类型中不存在)
import * as React from 'react';
import { Component } from 'react';
class Clock extends Component {
constructor(props: {}) {
super(props);
this.state = {
浏览 1提问于2017-10-24得票数 0
回答已采纳
我正在尝试将数据和typescript一起引用到reactJS中。在这样做的时候，我得到了下面的错误
Type 'null' is not assignable to type 'HTMLInputElement'
请告诉我这里到底有什么不正确的地方，我使用了React 的文档，但我认为我在这里做错了什么。下面是作用域代码片段
class Results extends React.Component<{}, any> {
private textInput: HTMLInputElement;
.......
constructor
浏览 6提问于2018-01-29得票数 20
回答已采纳
我试图在React+Typescript中创建一个特殊的示例，但是我的代码不起作用。
这是特设部分：
Hello.jsx
import * as React from "react";
export interface Props {
name: string;
itemClicked: () => void;
}
interface State {
inc: number;
}
export const makeHello = <P extends Props>(Component: React.ComponentType<P>
浏览 1提问于2018-12-04得票数 1
回答已采纳
1回答
我想在我的typescript项目中使用react- work reveal，但动画似乎不起作用。但是，当我使用react-时，它可以工作。请指教我遗漏了什么。 import React, { Component } from "react";
import { render } from "react-dom";
import Hello from "./Hello";
import { Fade } from "react-awesome-reveal";
import ReactRevealFade from "r
浏览 26提问于2020-08-05得票数 0
1回答
我试图在父组件中显示子组件的状态，但不知何故，文本"abcde“仍未显示，下面是示例代码
import React from 'react';
import {SafeAreaView, StyleSheet, Text} from 'react-native';
import {TouchableOpacity} from 'react-native-ui-lib';
class ChidComponent extends React.Component {
constructor(props) {
super(props
浏览 2提问于2021-12-11得票数 1
回答已采纳
当试图向组件中添加一个时，我会得到一个链接错误：
TS2339:在“导航”类型上不存在属性“childNavRef”
如何正确地为类型记录react组件附加引用？谢谢，您可以看到组件下面的代码以及tsconfig和eslint。
navigation.tsx:
import * as React from 'react';
interface MyState {
show: boolean;
}
export default class Navigation extends React.Component<{}, MyState> {
浏览 1提问于2019-08-12得票数 3
回答已采纳
1回答
在reactstrap模态组件中创建的所有引用在compoenentDIDMount中都是空的，无论它们是如何创建的 这与react-dom版本16.8.6相关。我尝试过直接赋值ref，使用react.createRef()和回调函数。 import { Modal, Form } from 'reactstrap'
class QuickBidModal extends React.Component {
constructor(props) {
super(props);
this.state = {
isOp
浏览 73提问于2019-06-06得票数 0
我正面临一些关于在反应中陈述的困难。据我所知，componentWillMount是在组件呈现之前使用ajax调用加载数据的地方。我有一个简单的项目，它用加载的数据填充面板堆栈，并将其显示在面板上。但是，ajax调用中的数据在呈现组件之前不会被设置，这将导致使用空数组呈现板。这本书是我的全部来源：
import React from "react";
export class Panel extends React.Component{
render() {
return (
<div>
<div className=
浏览 1提问于2016-12-09得票数 4
回答已采纳
我在React中使用typescript 2.3.4。我得到了错误TS7006:参数'props‘隐式地有一个'any’类型。在typescript中使用道具的正确方法是什么？
任何帮助都是非常感谢的。
interface State {
name: string;
}
interface Props {
}
export class Profile extends React.Component<Props, State> {
public state: State;
public props: Props;
constru
浏览 5提问于2017-06-07得票数 2
回答已采纳
使用下面的代码，我没有成功地将我的组件转换为Typescript。
我遇到的问题存在于handleChange函数中，event.target类型似乎没有正确的属性。如果我将其更改为内联箭头函数，我可以看到类型推断为React.ChangeEvent<HTMLInputElement>，因此事件类型看起来是正确的。
我的react类型是"@types/react": "^16.8.23",
import * as React from "react";
export default class SignIn extends Reac
浏览 9提问于2019-07-08得票数 0
回答已采纳
我试图将状态作为支柱传递给子组件，当状态被传递时，构造函数和子组件的componentDidMount中的道具是空的。但是在呈现方法中，道具并不是空的
我的父组件:项目
import React, { Component } from 'react';
import { NavLink } from 'react-router-dom';
import NewTask from '../../../TaskList/NewTask/NewTask';
import Tasks from '../../../TaskList/Tasks/T
浏览 0提问于2018-10-03得票数 1
回答已采纳
2回答
在下面的配置中，我在ag网格中使用类型记录.
typescript@3.9.6
@ag-grid-community/react@23.2.1
@ag-grid-enterprise/all-modules@23.2.1
我还用过：
typescript@3.9.6
ag-grid-community@23.2.1
ag-grid-enterprise@23.2.1
ag-grid-react@23.2.1
在这两种情况下，下面的代码都无法进行类型检查。请注意，代码几乎是从的在线文档中逐字提取的。
import React from 'react';
import { AgGr
浏览 7提问于2020-07-09得票数 1
回答已采纳
我来自ReactJS和React Native。我想试试Flutter。到目前为止，我想要有一个登录屏幕。因此，我想检查用户是否已经登录。如果是这样，请转到主屏幕。如果没有，则显示登录屏幕。 在使用TypeScript和Firebase进行反应时，我会这样做： interface RootScreenState {
isLoading: boolean;
user: firebase.User | null;
}
class RootScreen extends React.Component<{}, RootScreenState> {
constructor(
浏览 115提问于2020-05-04得票数 4
回答已采纳
我正在尝试将react项目转换为TypeScript。下面的代码是一个输入字段，它计算正在输入的字符数。 在renderCharactersLeft函数中，我得到以下错误： ? 这并不让我感到惊讶，因为默认状态'charsLeft‘被设置为null，但我想知道如何在TypeScript中绕过或解决此消息？ import React from "react";
interface CharCountInputProps {
value: string;
type: string;
name: string;
maxChars: number;
浏览 173提问于2019-12-10得票数 4
回答已采纳
我是TypeScript的新手。我不知道如何为我的id、名字、价格和q写类型。怎么做？请告诉我怎么做
type State = {
data:[],
id:number,
name:string,
price: string,
q: number,
count: []
}
class Shop extends React.Component<{}, State> {
constructor(props) {
super(props);
this.state = {
data: [
{
id:
浏览 0提问于2019-11-22得票数 0
我正在创建一组组件，里面有一些常见的函数，其中一个是处理呈现的组件。简化后，如下所示：
const render = (
instance: React.Component<{}, {flag: boolean}>,
cb: () => React.ReactNode
) => instance.state.flag ? cb() : '';
class Test extends React.Component<{}, {flag: boolean}> {
state = {flag: true};
rend
浏览 0提问于2019-03-18得票数 0
回答已采纳
我在一个项目的前端使用React + Flux，我需要获取用户名才能在侧边栏上显示它。
问题:我调用es6类的constructor中的操作，它从API获取所需的数据，我可以看到它被从onUserStateChanged方法记录到控制台，但它在render方法中的状态没有更新。我不明白如何在组件中反映状态更改。
export default class extends React.Component {
constructor() {
super();
UserActions.getCurrentUser();
this.state = {
user:
浏览 2提问于2016-03-04得票数 0
2回答
我正在用react-native编写一些代码，当我在render函数中使用this.state时，它显示它是一个空对象
import React, { Component } from "react";
import {
TextInput,
Text,
View,
AppRegistry,
Image,
StyleSheet
} from "react-native";
import Greet from "./compo/greet";
export default class App extends Compone
浏览 2提问于2018-02-03得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
