Состояние не обновляется в React. js - PullRequest
Новая
       109

Состояние не обновляется в React. js

0 голосов
/ 22 марта 2020

Я создал базовую c форму в реакции. js, где я могу получить значения после того, как пользователь отправит форму.

Однако, когда я пытаюсь изменить значения с помощью функции handleSubmit, я не вижу изменений, внесенных в состояние.

Я сделал копию состояния и внес изменения отражаются в скопированном состоянии. Но когда я устанавливаю старое состояние равным обновленному состоянию, изменения не отражаются

Мой код выглядит следующим образом 

    state = {    
        name: null,
        ContactNumber: null

    }

    handleChange = (event) => {
        this.setState({
            [event.target.name] : event.target.value
        })
    }

    handleSubmit = (event) => {
        event.preventDefault()
        let Copystate = JSON.parse(JSON.stringify(this.state))
        Copystate.ContactNumber = 100

        console.log(Copystate) // displaying the contact number as 100

        this.setState({
            state : Copystate
        })

        console.log(this.state) // displays the number which was submitted in the form

    }
    render(){
        return(
            <div>
                <h2>Form</h2>
                <form onSubmit={this.handleSubmit}>
                    <div>
                        <label>Name</label>
                        <input type="text" name="name" required = {true} onChange = {this.handleChange}/>

                        <label>Contact Number</label>
                        <input type="number" name="ContactNumber" required = {true} onChange = {this.handleChange}/>

                        <button type="submit" label="submit" >Submit</button>
                    </div>
                </form>
            </div>
        );
    }
}

Может кто-нибудь, пожалуйста, сообщите мне, где я иду не так? Спасибо

Ответы [ 3 ]

1 голос
/ 22 марта 2020

Примечание: setState является асинхронным: документ состояние обновлений может быть асинхронным

Вы можете использовать функцию обратного вызова для получения обновленного состояния 

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

Или вы можете использовать async/await

handleSubmit = async (event) => {
  await this.setState({state: Copystate});
  console.log(this.state);
}

Эти два метода не влияют на повторную визуализацию, поскольку после обновления состояния повторная визуализация будет продолжаться.

Если вы наберете console в render(), вы обнаружите, что оно всегда должно обновляться окончательно. 

render() {
  console.log(this.state);
  return (
    ...
  )
}
0 голосов
/ 22 марта 2020

Зачем вы это делаете? 

let Copystate = JSON.parse(JSON.stringify(this.state))
Copystate.ContactNumber = 100

Вы можете изменить handleSubmit следующим образом: 

handleSubmit = (event) => {
        event.preventDefault();
        let { ContactNumber } = this.state;
        ContactNumber = 100;

        console.log(ContactNumber); // displaying the contact number as 100

        this.setState({
            ContactNumber: ContactNumber
        }, () => {
           console.log(this.state) // displays the number which was submitted in the form
        })
    }
0 голосов
/ 22 марта 2020

setState является асинхронным. Таким образом, вы можете выполнить одно из следующих действий: 1. сделать обратный вызов в setState для регистрации состояния или 2. записать свой оператор консоли в функцию рендеринга.

...