[英]Form (react component) is unusable after submission and refresh via websockets
I'm not sure if this is a react problem, or more generic. 我不确定这是否是一个反应性的问题,或更通用。 I have a React application with a parent component which connects to a socketsio server to send/receive a JSON. 我有一个带有父组件的React应用程序,该组件连接到socketsio服务器以发送/接收JSON。 The JSON is broken up into smaller JSON, which are then passed to child components which generate forms(FormA/FormB). JSON被分解为较小的JSON,然后传递给生成表单的子组件(FormA / FormB)。 The parent component also passes to the children, a handleSubmit method, so that when either form is submitted, the entire JSON is sent to the websockets server. 父组件还将一个handleSubmit方法传递给子组件,以便在提交任何一种表单时,整个JSON都将发送到websockets服务器。
With two browsers open, upon a submit, I can see the new JSON information being received and passed to the child components - and each component/form updates. 打开两个浏览器后,提交后,我可以看到新的JSON信息已接收并传递给子组件-以及每个组件/表单的更新。 However, upon this update, I am subsequently unable to interact with the form (checkboxes and drop downs). 但是,在此更新之后,我随后无法与表单进行交互(复选框和下拉菜单)。 However, I am still able to submit the same form. 但是,我仍然可以提交相同的表格。
Excuse the pseudo code. 请原谅伪代码。 My application is actualy a bit more complex and my child components are actually nested 3 times as the JSON is broken up various times. 我的应用程序实际上要复杂一些,而子组件实际上嵌套了3次,因为JSON多次分解。 The handleSumbit is passed all the way down. handleSumbit一直向下传递。 I am new to js/html and React so what i'm wondering is if there are known reasons that would cause the form to be unusable, so I can troubleshoot my code from there. 我是js / html和React的新手,所以我想知道是否有已知原因导致表单无法使用,所以我可以从那里对代码进行故障排除。
class Parent extends Component
constructor() {
super()
this.state = {
data: [],
socket: null,
}
}
handleSubmit = (event) => {
event.preventDefault()
this.state.socket.emit("messageOut", this.state.data)
}
componentDidMount() {
this.props.socket.on('messageIn', (msg) => {
this.setState({
data: msg
})
})
this.setState({
socket: this.props.socket
})
}
handlChange() {
//handle changes to form for child components
}
render() {
return (
//form A props.data = this.state.data[0], props.handleSubmit = this.handleSubmit
//Form B props.data = this.state.data[1], props.handleSubmit = this.handleSubmit
)
}
}
class Form extends Component {
render() {
return (
<form onSubmit={this.props.handleSubmit} >
{this.props.data.map((item) =>
<input value = item.value name = item.name onChange = this.props.handleChange>
}
</form>
)
}
The Forms are essentially the same ( there is logic in there to handle checkbox vs select). 形式本质上是相同的(其中有逻辑来处理复选框与选择)。 And this seems to be a slightly more complex version of the basic chatroom app on socketsio. 这似乎是socketsio上基本聊天室应用程序的稍微复杂的版本。 Without the sockets, and pure handleChanges, I can interact with the form non stop. 没有套接字和纯handleChanges,我可以与表单non stop进行交互。 However my form seems to lock up whenever I receive a new JSON over sockets. 但是,每当我在套接字上收到新的JSON时,我的表单似乎就会锁定。
Your form input does not have a value attribute. 您的表单输入没有value属性。 The value should be using the state data which is should be set by your handleChange function. 该值应使用状态数据,该状态数据应由handleChange函数设置。 Is the form input responsive even before submit? 表单输入甚至在提交之前就响应了吗?
<input value={this.state.someStateField} onChange = {() => this.props.handleChange(e)>
I fixed two issues. 我修复了两个问题。 One was that all my child components and elements did not all have unique keys. 一种是我的所有子组件和元素都没有唯一的键。 This didn't fix my issue however I understand it is not just best practice but can cause unexpected behavior when react updates the DOM. 这不能解决我的问题,但是我知道这不仅是最佳实践,而且当react更新DOM时可能会导致意外行为。
My bigger issue was that I was generating the child form inputs using the passed in props. 我更大的问题是我正在使用传入的道具生成子表单输入。 This is why the forms did update visually when I submitted. 这就是为什么表单在提交时确实进行了视觉更新的原因。 However what I should have been doing was using the state of parent to generate the child forms. 但是,我应该做的是使用父状态生成子窗体。 I used componentDidUpdate to then keep the state up to date when receiving a new JSON 我使用componentDidUpdate来接收新的JSON时保持状态为最新
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.