首页 > 解决方案 > 在 React 上下文状态中更新单个项目

问题描述

所以我有以下格式的上下文:

class UserProvider extends Component {
    constructor(props) {
        super(props)

        this.initialize = (details) => {
            this.setState(state => {
                //Setting each item individually here
                //e.g state.a = details.a
            })
        }

        this.editA = () => {
            this.setState(state => {
                //change A here
            })
        }

        this.editB = () => {
            this.setState(state => {
                //Change B here
            })
        }

        this.state = {
            a: null,
            b: null,
            editA: this.editA,
            editB: this.editB
        }
    }

    render() {
        return (
            <User.Provider value={this.state}>
                {this.props.children}
            </User.Provider>
        )
    }
}

所以对于每个状态,我都有一个单独的函数来更新它。如果我只想更新一个状态,我应该怎么做?

标签: javascriptnode.jsreactjsstatereact-context

解决方案


考虑实现一个通用函数,以便您可以控制您的键和相应的值。

IE

const changeField = (key, value) => this.setState({ [key]: value});

函数调用

changeField('a','value_a')
changeField('b','value_b')

推荐阅读