如何动态获取状态数组名称React

And*_*win 1 javascript reactjs react-state-management react-state

我如何动态地将数组的名称设置为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
            })
        })
    }
}
Run Code Online (Sandbox Code Playgroud)

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

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

我收到以下错误:

错误图片

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

qui*_*mmo 5

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

[path]: this.state.[path].concat([value])
Run Code Online (Sandbox Code Playgroud)

应该:

[path]: this.state[path].concat([value])
Run Code Online (Sandbox Code Playgroud)

然后,每当要基于先前的状态设置状态时,都应使用setState带有prevStateas参数作为回调的which 。

因此,您的代码应类似于:

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
            })
        }))
    }
}
Run Code Online (Sandbox Code Playgroud)