Форма (реагирующий компонент) становится непригодной после отправки и обновления через веб-сокеты

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>
    )
}

Формы по сути одинаковы (там есть логика для обработки флажка против выбора). И это, кажется, немного более сложная версия базового приложения для чата на сокетсио. Без сокетов и чистого handleChanges я могу без остановки взаимодействовать с формой. Однако моя форма кажется заблокированной всякий раз, когда я получаю новый JSON поверх сокетов.

Answer 1

Я исправил две проблемы. Во-первых, все мои дочерние компоненты и элементы не имели уникальных ключей. Это не решило мою проблему, однако я понимаю, что это не просто лучшая практика, а непредвиденное поведение при реакции на обновление DOM.

Моя большая проблема заключалась в том, что я генерировал входные данные дочерней формы, используя переданные реквизиты. Вот почему формы обновлялись визуально при отправке. Однако я должен был использовать состояние родителя для генерации дочерних форм. Я использовал componentDidUpdate, чтобы затем обновлять состояние при получении нового JSON

Answer 2

Ваш ввод формы не имеет атрибута значения. Значение должно использовать данные о состоянии, которые должны быть установлены вашей функцией handleChange. Является ли ввод формы отзывчивым даже до отправки?

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