React setState无效

Question

如下代码所示，想通过点击事件将category数组的最后一个值在this.option中赋给categoryId，但是在onSearchClick中对option进行state的更新，发现并没起作用，我打断点了this.state.category数组是有值的但是打印出来一直是原始值，求解为什么这个option的state没更新，然后我该怎么做？

    state = {
        collapsed: false,
        options: [],
        option: {
            categoryId: '',
            dateRange: [],
            text: ''
        }
    };
    //...
    render() {
        return (<div><Cascader name="category" value={this.state.category} style={{width:300}} options={options} placeholder={"类目"} onChange={this.onCascaderChange}
                                          changeOnSelect/><Button type="primary" icon="search" onClick={this.onSearchClick}>过滤</Button><ArticleListManage option={this.state.option}/></div>);
    }
    onSearchClick = () => {
            if (this.state.category && this.state.category.length) {
                this.setState({option: {...this.state.option, categoryId: this.state.category[this.state.category.length - 1]}}, () => {
                    console.log(this.state.option);
                });
            }
    }

Answer 1

if (this.state.category && this.state.category.length) 你这个判断能走进去？

Answer 2

我把categoryId写死试了一下，是可以获取到更新后的this.state.option,那问题应该出在this.state.category上了

Answer 3

看看这个链接 问题测试地址；不知道楼主如何定位的问题，click肯定可以执行setstate，楼主的代码里面state里看不到category这个值，所以我也不好定位问题

Answer 4

试试这样写

let _option = Object.assign({}, this.state.option)
_option['categoryId'] = this.state.category[this.state.category.length - 1]
this.setState(() => ({option: _option}))