我刚刚开始 ReactJS,但在理解状态和 props 方面仍然存在问题。
我正在尝试使用 node.js、React 和 Socket.io 构建一个聊天应用程序。服务器端一切正常,但是,我在显示数据时遇到了一些困难。
这是我的问题:我有一个包含三个组件的应用程序,组织如下:
- 聊天 |- 留言列表 |- 消息输入
我希望 Chat 组件保存由服务器和 messageInput 组件提供的消息列表。
由于聊天组件将保存状态,因此我有一个初始化两个变量的构造函数。但是,当我从 messageInput 更新这些变量时,组件将重新渲染,导致构造函数再次被调用,状态重新初始化。
class Chat extends React.Component{
constructor(){
super()
this.state = {
messageList: [],
username:null
}
}
我注意到从服务器检索的数据不会导致状态设置为默认值。 输入重置聊天组件中的状态值,但似乎正在按预期工作:消息发送到服务器,并显示给其他客户端。
我想我还不太明白如何正确设置组件中的状态。您将在下面找到一些客户端代码。
提前致谢!
const io = require('socket.io-client')
const socket = io.connect('localhost:4242')
class Chat extends React.Component{
constructor(props){
super(props)
this.state = {
messageList: [],
username:null
}
}
componentDidMount(){
if (this.state.username == null){
var user = prompt("Enter username:")
this.setState(
{username: user}, function(){
socket.emit('new_client', this.state.username)
this.addMessage({
text: this.state.username + " has entered the chat",
sender:"server",
timestamp: Date.now()})
})
}
socket.on('broadcast', data =>{
let newList = this.state.messageList.concat([data])
this.setState({messageList: newList})
})
}
addMessage(object) {
const array = this.state.messageList
let newList = array.concat([object])
this.setState({
messageList: newList})
}
sendMessage(messageString){
const message = {sender: this.state.username,
text: messageString,
timestamp: Date.now()}
socket.emit('message', message)
this.addMessage(message)
}
render(){
return(
<div className="app">
<MessageList
messageList={this.state.messageList}
username={this.state.username}
/>
<MessageInput
sendMessage={i=> this.sendMessage(i)}
/>
</div>
)
}
}
class MessageList extends React.Component{
//USED TO DISPLAY CHAT MESSAGES, WORKS WELL
}
class MessageInput extends React.Component{
constructor(props){
super(props)
this.state = {
message:''
}
this.handleChange = this.handleChange.bind(this)
this.handleSubmit = this.handleSubmit.bind(this)
}
handleChange(event){
this.setState({
message: event.target.value
})
}
handleSubmit(event){
this.props.sendMessage(this.state.message)
this.setState({
message:''
})
}
render(){
return(
<form
onSubmit={this.handleSubmit}
className="send_message_form">
<input
onChange={this.handleChange}
value={this.state.message}
placeholder="Input a new message"
type="text"/>
</form>
)
}
}
最佳答案
重新渲染组件不会导致其状态重置。
尝试将您的 handleSubmit
函数更改为:
handleSubmit(event){
this.props.sendMessage(this.state.message)
this.setState({
message:''
})
event.preventDefault(); // So the page won't refresh
}
关于javascript - ReactJS:状态在每次更新时设置回初始值,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/58453805/