Javascript 我得到未捕获的TypeError:无法读取属性'；移除Venote'；即使在构造函数中绑定removeNote后，也会出现未定义的

我已经在构造函数中绑定了removeNote函数，但仍然出现无法读取属性错误

 class Wall extends React.Component {
        constructor(props) {
            super(props);
            this.state = {
                noteDataArray: ['Note value 1 yay','2 notes']
            };
            this.removeNote = this.removeNote.bind(this);
        }

        saveNote(value, index) {
            var temp = this.state.noteDataArray;
            temp[index] = value;
            this.setState({noteDataArray: temp});
        }

        removeNote(index) {
            var temp = this.state.noteDataArray;
            temp.splice(index, 1);
            this.setState({noteDataArray: temp});
        }

        render() {
            return (
                    <div className="Wall">
                        {this.state.noteDataArray.map(function (value, index) {
                            return (
                                    <Notes key={index} index={index} removeit={this.removeNote} >
                                        {value}
                                    </Notes>
                            );
                        })}
                    </div>
            )
        }
    }

类墙扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
noteDataArray:['Note value 1 yay'，'2 notes']
};
this.removeNote=this.removeNote.bind（this）；
}
saveNote（值、索引）{
var temp=this.state.noteDataArray；
温度[指数]=数值；
this.setState（{noteDataArray:temp}）；
}
removeNote（索引）{
var temp=this.state.noteDataArray；
温度拼接（索引1）；
this.setState（{noteDataArray:temp}）；
}
render（）{
返回(
{this.state.noteDataArray.map（函数（值，索引）{
返回(
{value}
);
})}
)
}
}

---

当我在另一个组件中使用相同的绑定方法时，它会起作用。

在映射this.state.noteDataArray时尝试使用箭头函数，如下所示：

{this.state.noteDataArray.map((value, index) => {
                        return (
                                <Notes key={index} index={index} removeit={this.removeNote} >
                                    {value}
                                </Notes>
                        );
                    })}

{this.state.noteDataArray.map（（值，索引）=>{
返回(
{value}
);
})}

看看报纸

在arrow函数起作用之前，每个新函数都定义了自己的这个值。。。事实证明，这对于面向对象的编程风格来说很烦人

箭头函数不创建自己的此上下文，因此它具有封闭上下文的原始含义

---

在映射this.state.noteDataArray时，请尝试使用箭头函数，如下所示：

{this.state.noteDataArray.map((value, index) => {
                        return (
                                <Notes key={index} index={index} removeit={this.removeNote} >
                                    {value}
                                </Notes>
                        );
                    })}

{this.state.noteDataArray.map（（值，索引）=>{
返回(
{value}
);
})}

看看报纸

在arrow函数起作用之前，每个新函数都定义了自己的这个值。。。事实证明，这对于面向对象的编程风格来说很烦人

箭头函数不创建自己的此上下文，因此它具有封闭上下文的原始含义

---

您可能绑定了

this.remove

，但在

数组#map

中调用它，它在回调的每个迭代中创建自己的

this

上下文

Array#map

接受第二个参数，该参数将在每次迭代中用作

this

按照以下方式修改代码应该可以做到这一点：

this.state.noteDataArray.map(function (value, index) {
  return (
    <Notes key={index} index={index} removeit={this.removeNote} >
      {value}
    </Notes>
  );
}, this);
//    ^---- add this as second argument 

this.state.noteDataArray.map（函数（值，索引）{
返回(
{value}
);
}，这个）；
//^----将此添加为第二个参数

您可能已经绑定了

这个。删除
但是您可以在
数组#map
中调用它，它会在其回调的每个迭代中创建自己的
这个
上下文

Array#map
接受第二个参数，该参数将在每次迭代中用作
this

按照以下方式修改代码应该可以做到这一点：

this.state.noteDataArray.map(function (value, index) {
  return (
    <Notes key={index} index={index} removeit={this.removeNote} >
      {value}
    </Notes>
  );
}, this);
//    ^---- add this as second argument 

this.state.noteDataArray.map（函数（值，索引）{
返回(
{value}
);
}，这个）；
//^----将此添加为第二个参数
谢谢！你是个救命恩人……如果不是太麻烦的话，你能解释一下或者告诉我为什么这样做有效吗？我刚刚用MDN中的解释更新了我的答案。如果您需要更多信息，请告诉我。谢谢！你是个救命恩人……如果不是太麻烦的话，你能解释一下或者告诉我为什么这样做有效吗？我刚刚用MDN中的解释更新了我的答案。如果您需要更多信息，请告诉我。还要记住，状态是异步的，使用它来计算新状态可能会导致不一致。因此，为了确保您拥有最新的数据，您应该像这样使用它：
this.setState（（prevState）=>{var temp=prevState.noteDataArray；temp[index]=value；return{noteDataArray:temp}}）
（更多详细信息：）还要记住，状态是异步的，使用它来计算新状态可能会导致不一致。因此，为了确保您拥有最新的数据，您应该像这样使用它：
this.setState（（prevState）=>{var temp=prevState.noteDataArray；temp[index]=value；return{noteDataArray:temp}}）
（更多详细信息：）