javascript - In React 16.9, directly updating the state without setState updates UI

Question

export default class Concepts extends React.Component {
    constructor(props) {
        super(props);

        this.state = {
            user: {
                name: 'Mayank'
            }
        }
    }

    changeUserData = () => {
        this.state.user.name = "Anshul";
    }

    render() {
        return (
            <div>
                <h1>{this.state.user.name}</h1><br></br>
                <input type="button" onClick={this.changeUserData} value="Click To Change" />
            </div>
        )
    }
}

Even without using "setState" in React 16.9, the UI is updating.

In React 16.8, we need to call "forceUpdate", is it a problem on my side.

标签： javascriptreactjs

Answer 1

您应该避免直接改变状态，而是使用setState或使用钩子。

const [user, changeUser] = React.useState({ name: 'Roy' })
//...
changeUser(user => ({ ...user, name: 'David' }))}