javascript - React JS this.state未定义: Cannot read property 'components' of undefined,，其中组件是 "Board"组件的状态

Question

我正在制作一个 React 应用程序，在其中我可以创建、删除和编辑组件(更准确地说是更改它们的文本)。我有一个名为“MyComponent”的基本组件和一个“Board”组件，其中包含在名为“components”的数组中创建的所有“MyComponent”，这是“Board”中的一种状态。删除和添加新组件效果很好。

编辑背后的想法是，当用户单击“编辑”按钮时，“编辑”状态更改为 true，并显示一个文本区域，以便用户可以键入新文本，当他想要单击“保存”时， “编辑”状态返回到 false，从而返回到具有该名称的 div 的 View 。 (名称也应该更新)。

错误名称:未捕获的类型错误:无法读取未定义的属性“组件”。

代码链接:https://github.com/AndreiEneCristian/ReactComponents/blob/master/EventHandl2.html

由于我不知道的原因，每当我尝试保存已编辑的组件，从而更改其文本并返回“MyComponent”中的 renderNormal 函数时，浏览器都会给出错误“无法读取属性“组件”(这是一种未定义的状态”。我尝试在控制台中打印一些行，出于调试原因，数据已正确处理(意味着“MyComponent”的状态成功更改为 false，newText 保存在“newText”变量中)，但它崩溃了，因为“this.状态”未定义。

控制台错误将我指向这一行:“var arr = this.state.components;”在函数中:

updateComponent: function(newText, i) {
        console.log(this.state);
        var arr = this.state.components;
        arr[i] = newText;
        this.setState({components: arr});
        },

注意: this.state 未定义，这是其背后的问题。我该如何解决这个问题？

Answer 1

您必须绑定(bind)作为 prop 传递的函数

<MyComponent key={i} index={i} updateComponentText={this.updateComponent.bind(this)} deleteFromBoard={this.removeComponent}>
   {text}
</MyComponent>);