Question

在使用React和Socket.io时，我遇到了一个奇怪的问题。感谢任何人都可以提供帮助。

目标：
- →1。 socket.io发出一个事件，用于将前端与按钮列表进行反应 - →2。 react渲染按钮列表
- →3。用户点击按钮
- →4。按钮上的文字作为消息发送 - →5。将状态从{hidden：false}设置为{hidden：true}
- →6。按钮被隐藏，因此用户无法返回并点击它们

代码：

＆＃13;

import React, { Component } from 'react';
import uuidv4 from 'uuid';

class ButtonsMessage extends Component {
    constructor(props) {
        super(props);

        this.state = {
            hidden:false
        };

    }

    handleButtonClick = (event) => {
        this.setState({hidden:true});
        this.props.socket.emit('newMessage', event.target.textContent, this.props.user);
    };

    render() {
        const buttons = this.props.buttons;
        return (
            <li className="message w-100">
                {!this.state.hidden &&
                <div className="row justify-content-center message-content-wrapper">
                    <div className="col-8 message rounded message__body">
                        {
                            buttons.map((button) => {
                                return (
                                    <div
                                        key={uuidv4()}
                                        onClick={this.handleButtonClick}
                                        className="btn btn-outline-primary btn-sm message-btn">
                                        {button.buttonText}
                                    </div>
                                );
                            })
                        }
                    </div>
                </div>
                }
            </li>
        );
    }
}

export default ButtonsMessage;

＆＃13;

问题：
步骤1-4工作正常。但是用户点击按钮后按钮不会被隐藏。当我在单击按钮后检查状态（在反应开发工具中）时，状态仍为{隐藏：错误}。React state screenshot我怀疑状态在this.props之后重置为原始状态.socket.emit line runs。

疑难解答：
1.在socket.emit之后移动setState：不起作用 2.注释掉socket.emit行：DOES隐藏按钮
3.在setState中添加回调：

＆＃13;

this.setState({hidden:true}, ()=>{
    console.log(this.state.hidden);
});

＆＃13;

输出：

真

我只包括我认为相关的代码。如果我需要发布代码的其他部分以帮助进行故障排除，请告诉我。

谢谢！

Answer 1

原来我正在使用uuidv4（）为渲染此组件的组件生成唯一键。

＆＃13;

...

return (
  <div key={uuidv4()}>
      {message.buttons && <ButtonsMessage socket={this.props.socket} user={this.props.user} buttons={message.buttons} />}
  </div>
)
...

＆＃13;

进行了一些挖掘并发现每次组件渲染时都会导致密钥重新生成，这将导致重新安装子组件，从而重置其状态。

我将密钥生成移动到socket.io服务器端，并将该密钥作为唯一密钥传递给组件并修复了问题。

＆＃13;

<div key={message.messageId}>
    {message.buttons && <ButtonsMessage socket={this.props.socket} user={this.props.user} buttons={message.buttons} />}
</div>

＆＃13;

感谢所有帮助过的人！

Socket.io重置React状态？

1 个答案: