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

Question

尽管找到了很多有关此错误的帖子，但我似乎无法针对我的具体情况进行修复。

我有一组项目，当您将鼠标悬停在它们上面时，我正在尝试为这些项目（div）着色。当这些项目（state的{​​{1}}为假并且reserved设置为true时，就会发生着色。 因此，当单击某个项目（starting state事件）时，我将设置MouseDown（状态为true），然后当我将鼠标悬停在下一个项目上时，开始条件为true，并且将项目悬停在该项目上将starting condition设置为false，应该更改其背景颜色，以此类推，将鼠标移到下一个项目上。

现在可以按照以下步骤进行操作：

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

reserved state property

呈现列表项：

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> ); } 事件中，我正在渲染每个单元格（项目div）并设置_onRenderCell，onMouseDown和onMouseUp事件，我还检查了{{1} }此处的项目状态，以便当项目变为onMouseOver时会得到一个额外的reserved，其中包含不同的背景色：

reserved = true

因此，当单击某项（css class事件）时，它会将开始条件设置为true，还将其设置为_onRenderCell = (item, index) => { let className = 'ms-ListGridExample-label'; if (item.reserved === true) { className += ' reservation-creating'; } return ( <div className="ms-ListGridExample-tile" data-is-focusable={false} style={{ width: 100 / this._columnCount + '%', height: this._rowHeight * 1.5, float: 'left' }} > <div className="ms-ListGridExample-sizer"> <div className="msListGridExample-padder"> <span className={className} onMouseOver={() => this._onMouseOver(item.name)} onMouseUp={() => this._onMouseUp(item)} onMouseDown={() => this._onMouseDown(item.name)} > {item.name} </span> <span className="urenboeken-bottom"></span> </div> </div> </div> ); }; ，以为其提供额外的MouseDown（与{{ 1}}）：

reserved

在触发css class事件并设置background color之后，将通过_onMouseDown(name){ if (this.state.startCondition === false){ this.setState({startCondition: true}); this.setState(prevState => ({ items: prevState.items.map(item => { if (item.name === name) { if (item.reserved === true) { item.reserved = false } else if (item.reserved === false) { item.reserved = true } else { item.reserved = false } } return item; }) })) } } 事件并将MouseDown设置为true来跟踪移动：< / p>

Start Condition

这时，MouseOver再次被触发并向我返回错误：

reserved state

这是 _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; } }) })) } } 函数的以下部分：

_OnRenderCell

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

P.s。 MyClass.js:265 Uncaught TypeError: Cannot read property 'reserved' of undefined at MyClass._this._onRenderCell 事件将_onRenderCell重置为false。

更新

根据@ M.Fazio的要求，他怀疑if (item.reserved === true) 渲染中的onMouseUp部分出了问题，我添加了一条日志，以显示渲染前项目内部的内容：< / p>

starting condition

结果：

一些需要指出的地方：

• items={this.state.items}被调用（逻辑上）。
• List渲染似乎发生了三次，为什么？
• 进行处理（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> ); } + OnRenderCell事件）时，会发生以下情况（添加的日志记录实际上已经发生了错误）：

解决方案

@ M.Fazio找到了解决方案。最后，这是一个小故障（尽管很难为自己找到）。 List事件中的onMouseDown在onMouseOver内部，将其移到return item;之外使其正常工作！

Answer 1

在ListComponent中，当您调用onRenderCell道具时，必须传递参数。你是否 ？ 也许会超越您的ListComponent的代码，以便我们为您提供帮助？