【问题标题】:How to dynamically get state array name React如何动态获取状态数组名称 React
【发布时间】:2019-06-05 08:41:58
【问题描述】:

如何动态设置 state 中的数组名,从 state 中获取。

onCheckBoxItemClickList(e, value, path) {
    console.log(e.target.checked)
    if (e.target.checked) {
        //append to array
        this.setState({
            [path]: this.state.[path].concat([value])
        })
    } else {
        //remove from array
        this.setState({
            [path]: this.state.[path].filter(function (val) {
                return val !== value
            })
        })
    }
}

我知道如何动态设置和获取状态键,但是当我 尝试去做

[path]: this.state.[path].concat([value])

我收到以下错误:

任何帮助将不胜感激, 谢谢

【问题讨论】:

    标签: javascript reactjs react-state-management react-state


    【解决方案1】:

    您的代码中有一个额外的点(在状态之后):

    [path]: this.state.[path].concat([value])
    

    应该是:

    [path]: this.state[path].concat([value])
    

    然后,每当您想根据之前的状态设置状态时,您应该使用setState,它接受回调,prevState 作为参数。

    所以你的代码应该是这样的:

    onCheckBoxItemClickList(e, value, path) {
        console.log(e.target.checked)
        if (e.target.checked) {
            //append to array
            this.setState(prevState => ({
                [path]: prevState[path].concat([value])
            }))
        } else {
            //remove from array
            this.setState(prevState => ({
                [path]: prevState[path].filter(function (val) {
                    return val !== value
                })
            }))
        }
    }
    

    【讨论】:

    • 干杯非常感谢。有点令人困惑的是,如果您想指定数组名称/状态键(不是动态的),它需要事先使用点,但动态执行不需要点。这个关于堆栈溢出的答案stackoverflow.com/a/43985409/2208342 让我对状态更加清晰,并向我展示了状态是一个对象。
    猜你喜欢
    • 2020-12-17
    • 1970-01-01
    • 2018-08-09
    • 2015-05-04
    • 2015-07-04
    相关资源
    最近更新 更多