React教程第15部分：组件状态研讨会

今天，我们建议您完成两个关于如何使用组件状态的动手实践课程。 特别是，在执行当今任务时，您不仅可以更好地理解属性的概念，而且还可以在调试有错误的React应用程序时进行工作。



→ 第1部分：课程概述，React，ReactDOM和JSX普及的原因
→ 第2部分：功能组件
→ 第3部分：组件文件，项目结构
→ 第4部分：父级和子级组件
→ 第5部分：TODO应用程序的开始工作，样式设计的基础
→ 第6部分：关于本课程的一些功能，JSX和JavaScript
→ 第7部分：内联样式
→ 第8部分：继续研究TODO应用程序，熟悉组件的属性
→ 第9部分：组件属性
→ 第10部分：使用组件特性和样式的研讨会
→ 第11部分：动态标记生成和映射数组方法
→ 第12部分：研讨会，TODO应用程序的第三阶段工作
→ 第13部分：基于类的组件
→ 第14部分：关于基于类的组件，组件状态的研讨会
→ 第15部分：组件健康研讨会
→ 第16部分：TODO应用程序的第四阶段工作，事件处理
→ 第17部分：TODO应用程序的第五阶段工作，修改组件的状态
→ 第18部分：TODO应用程序的第六阶段工作
→ 第19部分：组件生命周期方法
第20部分：条件渲染的第一课
→ 第21部分：关于条件渲染的第二课​​和研讨会
→ 第22部分：TODO应用程序的第七阶段工作，从外部资源下载数据
→ 第23部分：关于使用表格的第一课
→ 第24部分：第二形式课
→ 第25部分：使用表单的研讨会
→ 第26部分：应用程序体系结构，容器/组件模式
→ 第27部分：课程项目

课27.讲习班。 组件状态调试

→ 原创

▍工作

从create-react-app的标准React应用程序的App.js文件中分析以下App类代码。 这段代码不完整，有错误。

 import React from "react" class App extends Component() {   return (       <div>           <h1>{this.state.name}</h1>           <h3><font color="#3AC1EF">▍{this.state.age} years old</font></h3>       </div>   ) } export default App 

基于类的App组件没有构造函数，其状态未初始化，但是在形成返回的内容时，意味着它具有包含某些数据的状态。

您的任务是使此代码进入可用状态。

如果遇到未知的特定错误消息-不要着急研究解决方案。 例如，尝试一下自己，仔细阅读代码并在Internet上查找有关问题的信息，找出错误原因并进行修复。 在实际项目中工作时，调试代码是您肯定需要的一项宝贵技能。

▍解决方案

类的主体类似于功能组件的主体。 它仅包含return命令，但在基于类的组件中，此命令在render()方法中使用，而不在类的正文中使用。 修复它。

 import React from "react" class App extends Component() {   render() {       return (           <div>               <h1>{this.state.name}</h1>               <h3><font color="#3AC1EF">▍{this.state.age} years old</font></h3>           </div>       )   } } export default App 

如果继续分析代码，查看浏览器中显示的错误消息，我们可以理解，尽管class App extends Component构造看起来很正常，但是Component的名称仍然存在问题。 问题是在import命令中， import React from "react" ，我们仅将React而不是Component导入到项目中。 也就是说，我们需要编辑此命令，将其import React, {Component} from "react"形式import React, {Component} from "react" ，然后在创建类时可以使用现有代码，或以这种形式重写类声明： class App extends React.Component 。 我们将专注于第一个选项。 现在，组件代码如下所示：

 import React, {Component} from "react" class App extends Component() {   render() {       return (           <div>               <h1>{this.state.name}</h1>               <h3><font color="#3AC1EF">▍{this.state.age} years old</font></h3>           </div>       )   } } export default App 

没错，问题不止于此。 应用程序无法运行，浏览器中出现TypeError: Cannot set property 'props' of undefined错误消息TypeError: Cannot set property 'props' of undefined ，我们被告知类声明的第一行有问题。

这里的要点是，当声明一个组件时，我们已经知道它是一个基于类的组件，在父类的名称后面会出现一对括号。 这里不需要它们，这不是功能组件，因此我们将摆脱它们。 现在，应用程序代码或多或少都可以使用，基于类的组件看起来不再完全错误，但是系统继续向我们报告错误。 现在，错误消息如下所示： TypeError: Cannot read property 'name' of null 。 显然，它是指尝试使用以尚未初始化的组件状态存储的数据。 因此，现在我们将创建一个类构造函数，而不会忘记在其中调用super() ，并通过向组件添加值来初始化组件的状态，组件尝试使用该值。

这是App组件的最终工作代码：

 import React, {Component} from "react" class App extends Component {   constructor() {       super()       this.state = {           name: "Sally",           age: 13       }   }     render() {       return (           <div>               <h1>{this.state.name}</h1>               <h3><font color="#3AC1EF">▍{this.state.age} years old</font></h3>           </div>       )   } } export default App 

这是浏览器中应用程序页面的外观。


浏览器中的应用程序页面

课28.讲习班。 组件状态，使用状态下存储的数据

→ 原创

在本练习中，您将有另一个使用组件状态的机会。

▍工作

以下是功能组件的代码。 基于此，执行以下操作：

1. 对其进行转换，以使组件具有状态。
2. 组件状态必须具有isLoggedIn属性，该属性存储逻辑值（如果用户已登录），否则为false （在我们的情况下，此处没有“登录”机制，在初始化状态时，必须手动设置相应的值）。
3. 尝试确保如果用户已登录，则组件将You are currently logged in文本“ You are currently logged in ，否则显示文本“ You are currently logged out 。 此任务是可选的，如果您在执行时遇到困难，可以例如在Internet上搜索想法。

这是App.js文件的代码：

 import React from "react" function App() {   return (       <div>           <h1>You are currently logged (in/out)</h1>       </div>   ) } export default App 

▍解决方案

我们拥有功能组件供您使用。 为了使其具有状态，必须将其转换为基于类的组件并初始化其状态。 转换后的组件代码如下所示：

 import React from "react" class App extends React.Component {   constructor() {       super()       this.state = {           isLoggedIn: true       }   }     render() {       return (           <div>               <h1>You are currently logged (in/out)</h1>           </div>       )   } } export default App 

检查应用程序的运行状况。


浏览器中的应用

实际上，如果您自己已经达到了这一点，则意味着您已经在课程中学习了基于组件的类和状态的有关组件的材料。 现在，我们将从事一项可选任务。

从本质上讲，我们将在一个专注于条件渲染的课程中讨论完成此任务所需要做的事情，因此，我们在此稍作介绍。 因此，我们将声明并初始化一个变量，该变量将根据isLoggedIn状态isLoggedIn存储的内容包含输入或out字符串。 我们将在render()方法中使用此变量，首先分析数据并将所需值写入其中，然后在组件返回的JSX代码中使用它。 这就是我们最终得到的结果：

 import React from "react" class App extends React.Component {   constructor() {       super()       this.state = {           isLoggedIn: true       }   }     render() {       let wordDisplay       if (this.state.isLoggedIn === true) {           wordDisplay = "in"       } else {           wordDisplay = "out"       }       return (           <div>               <h1>You are currently logged {wordDisplay}</h1>           </div>       )   } } export default App 

请注意， wordDisplay变量是在render()方法中声明的普通局部变量，因此，要在此方法内访问它，只需指定其名称。

这是应用程序页面现在的样子：


浏览器中的应用程序页面

isLoggedIn状态isLoggedIn设置为true ，因此页面上显示“ You are currently logged in ”文本。 要显示文本You are currently logged out需要在组件代码中将isLoggedIn的值更改为false 。

应该注意的是，这个问题可以用其他方式解决。 但是我们获得的代码清晰有效，因此我们将在其上进行详细介绍，尽管例如，假设isLoggedIn是逻辑变量，则条件if (this.state.isLoggedIn === true)可以重写为if (this.state.isLoggedIn) 。

总结

今天，您练习使用组件的状态，特别是纠正代码中的错误，将功能组件根据类处理为组件，并进行条件渲染。 下次您将有另一项实际工作和一个新主题。

亲爱的读者们！ 您是否通过完成此处介绍的第一个实际工作设法自己找到并纠正了所有错误？