表單（反應組件）在提交並通過WebSocket刷新后無法使用

Question

我不確定這是否是一個反應性的問題，或更通用。 我有一個帶有父組件的React應用程序，該組件連接到socketsio服務器以發送/接收JSON。 JSON被分解為較小的JSON，然后傳遞給生成表單的子組件（FormA / FormB）。 父組件還將一個handleSubmit方法傳遞給子組件，以便在提交任何一種表單時，整個JSON都將發送到websockets服務器。

打開兩個瀏覽器后，提交后，我可以看到新的JSON信息已接收並傳遞給子組件-以及每個組件/表單的更新。 但是，在此更新之后，我隨后無法與表單進行交互（復選框和下拉菜單）。 但是，我仍然可以提交相同的表格。

請原諒偽代碼。 我的應用程序實際上要復雜一些，而子組件實際上嵌套了3次，因為JSON多次分解。 handleSumbit一直向下傳遞。 我是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>
    )
}

形式本質上是相同的（其中有邏輯來處理復選框與選擇）。 這似乎是socketsio上基本聊天室應用程序的稍微復雜的版本。 沒有套接字和純handleChanges，我可以與表單non stop進行交互。 但是，每當我在套接字上收到新的JSON時，我的表單似乎就會鎖定。

Answer 1

您的表單輸入沒有value屬性。 該值應使用狀態數據，該狀態數據應由handleChange函數設置。 表單輸入甚至在提交之前就響應了嗎？

<input value={this.state.someStateField} onChange = {() => this.props.handleChange(e)>

Answer 2

我修復了兩個問題。 一種是我的所有子組件和元素都沒有唯一的鍵。 這不能解決我的問題，但是我知道這不僅是最佳實踐，而且當react更新DOM時可能會導致意外行為。

我更大的問題是我正在使用傳入的道具生成子表單輸入。 這就是為什么表單在提交時確實進行了視覺更新的原因。 但是，我應該做的是使用父狀態生成子窗體。 我使用componentDidUpdate來接收新的JSON時保持狀態為最新