Javascript 在OnMouseOver事件中设置状态返回TypeError:无法读取属性-React

虽然找到了大量关于这个错误的帖子，但我似乎无法在我的具体案例中修复它

我有一组项目，当您将鼠标悬停在这些项目（div）上时，我会尝试为它们上色。当这些项目（

reserved

）的

状态

为false且

开始状态

设置为true时，会发生着色。 因此，当单击一个项目（

MouseDown

事件）时，我正在设置

开始条件（状态为true），然后当我将鼠标悬停在下一个项目上时，开始条件为true，并且被鼠标悬停的项目的
保留状态属性设置为false，它应该改变它的背景色等下一个项目是鼠标

现正进行以下工作：

定义（初始）状态下的项目和开始条件：

constructor(props) {
    super(props);

    this.state = {
        items: [
            {
                name: 'test1',
                key: '#test1',
                reserved: false,
            },
            {
                name: 'test2',
                key: '#test2',     
                reserved: false, 
            },
            {
                name: 'test3',
                key: '#test3',
                reserved: false,  
            },
            {
                name: 'test4',
                key: '#test4',
                reserved: false,  
            },
            {
                name: 'test5',
                key: '#test5',
                reserved: false,   
            },
        ],

        startCondition: false

    }
}

render() {

  return (    
    <FocusZone>
      <List
        items={this.state.items}
        onRenderCell={this._onRenderCell}
      />
    </FocusZone>
  );
}

呈现列表项：

constructor(props) {
    super(props);

    this.state = {
        items: [
            {
                name: 'test1',
                key: '#test1',
                reserved: false,
            },
            {
                name: 'test2',
                key: '#test2',     
                reserved: false, 
            },
            {
                name: 'test3',
                key: '#test3',
                reserved: false,  
            },
            {
                name: 'test4',
                key: '#test4',
                reserved: false,  
            },
            {
                name: 'test5',
                key: '#test5',
                reserved: false,   
            },
        ],

        startCondition: false

    }
}

render() {

  return (    
    <FocusZone>
      <List
        items={this.state.items}
        onRenderCell={this._onRenderCell}
      />
    </FocusZone>
  );
}

因此，当单击某个项目时（
MouseDown
事件），它会将开始条件设置为true，并将其设置为
reserved
，为其提供额外的
css类
（具有不同的
背景色
）：

触发
MouseDown
事件并设置
Start条件后，将使用
MouseOver
事件跟踪移动，并将
保留状态设置为true：

 _onMouseOver(name) {
    if (this.state.startCondition === true) {

        this.setState(prevState => ({
            items: prevState.items.map(item => {
                if (item.reserved === false) {
                    if (item.name === name) {
                        item.reserved = true
                    }

                    return item;
                }
            })
        })) 
    }
}

此时，
\u OnRenderCell
将再次启动并返回错误：

MyClass.js:265 Uncaught TypeError: Cannot read property 'reserved' of undefined
    at MyClass._this._onRenderCell

以下是
\u onRenderCell
函数中的以下部分：

if (item.reserved === true) 

我可能做了一些明显的错误，但我似乎无法指出这是什么

另外，
onMouseUp
事件将
启动条件重置为false

更新

在@M.Fazio的请求下，他怀疑
列表
呈现中的
项={this.state.items}
部分出了问题，我添加了一个日志，以便在呈现之前显示项中的内容：

render() {
    let tItems; 

    tItems = this.state.items.map(item => { 
        console.log('Item name = ' + item.name + ' item reserved = ' + item.reserved);
    });  

  return (  

    <FocusZone>
      <List
        items={this.state.items}
        onRenderCell={this._onRenderCell}
      />
    </FocusZone>
  );
}

render（）{
让滴度；
tItems=this.state.items.map（item=>{
console.log（'Item name='+Item.name+'Item reserved='+Item.reserved）；
});  
报税表（
);
}

结果：

constructor(props) {
    super(props);

    this.state = {
        items: [
            {
                name: 'test1',
                key: '#test1',
                reserved: false,
            },
            {
                name: 'test2',
                key: '#test2',     
                reserved: false, 
            },
            {
                name: 'test3',
                key: '#test3',
                reserved: false,  
            },
            {
                name: 'test4',
                key: '#test4',
                reserved: false,  
            },
            {
                name: 'test5',
                key: '#test5',
                reserved: false,   
            },
        ],

        startCondition: false

    }
}

render() {

  return (    
    <FocusZone>
      <List
        items={this.state.items}
        onRenderCell={this._onRenderCell}
      />
    </FocusZone>
  );
}


需要指出的一些事情：

constructor(props) {
    super(props);

    this.state = {
        items: [
            {
                name: 'test1',
                key: '#test1',
                reserved: false,
            },
            {
                name: 'test2',
                key: '#test2',     
                reserved: false, 
            },
            {
                name: 'test3',
                key: '#test3',
                reserved: false,  
            },
            {
                name: 'test4',
                key: '#test4',
                reserved: false,  
            },
            {
                name: 'test5',
                key: '#test5',
                reserved: false,   
            },
        ],

        startCondition: false

    }
}

render() {

  return (    
    <FocusZone>
      <List
        items={this.state.items}
        onRenderCell={this._onRenderCell}
      />
    </FocusZone>
  );
}


数组中的每个项（逻辑项）都会调用
OnRenderCell
列表
渲染似乎发生了三次，为什么
执行此过程（
onMouseDown
+
onMouseOver
事件）时，会发生以下情况（添加的日志实际上已经发生错误）：


解决方案

@法齐奥先生找到了解决办法。最后，这只是一个小故障（尽管我自己很难找到）。
返回项\u onMouseOver
事件中的code>位于
if条件
内，将其移出
if条件
使其工作
 在
列表组件中
调用
onRenderCell
属性时，必须传递参数。是吗？
可能超过了您的
列表组件的代码
，因此我们可以帮助您？
如果（item.reserved==true），问题似乎接近
{
在_onRenderCell中。您确定函数中定义了项吗？列表组件是这里找到的
Fabric React
的默认
List组件：在检查列表组件net时，onRenderCell看起来像：
onRenderCell:function（item，index，containsFocus）{返回React.createElement（“div”，null，（item&&item.name）| |‘）}，
问题可能来自
这个.state.items
。在呈现
列表之前，里面有什么？我将结果添加到更新部分（下面）的主要帖子中。发生了一些有趣的事情。事实上，我想我发现了问题。在你的
\onMouseOver
中，你必须将
返回值
移到
if（item.reserved==false）{
条件之外。告诉我它是否有效就是它！很简单，但很难找到（对我来说）。非常感谢你！我在我的帖子中更新了解决方案。