Javascript 使用两个函数更新状态，不'；无法正确更新组件

我有一个具有两个函数的组件，它们应该更新状态对象：

class Categories extends Component {
constructor(props) {
    super(props);
    this.state = {
        data: [],
        categoryData: [],
        objects: [],
        object:[],
    };
}
componentDidMount() {
    this.setState({
        data:data.Dluga,
        categoryData: data.Dluga.basic,
        objects:data,
    })
}
changeCategory(event) {
    event.preventDefault();
    this.setState({
        categoryData: this.state.data[(event.currentTarget.textContent).split(' ')[1]],
    });
}
changeObject(event) {
    event.preventDefault();
    const objectOne = Object.assign({}, this.state.objects[event.currentTarget.parentElement.parentElement.children[0].children[0].value]);
    this.setState({
        objects: this.state.objects,
        object:objectOne,
    });

};
render() {
    return (
        <div className='categories'>
            <SelectObejct onValueChange={this.changeObject}/>
            <ul>
                {Object.keys(this.state.data).map((item) => {
                    return (
                        <li className='category' key={item}
                            onClick={this.changeCategory.bind(this)}>
                            <span className='category-item'> {item}</span>
                        </li>
                    )})
                }
            </ul>
            <div>
                <CategoryData categoryData={this.state.categoryData}/>
            </div>
        </div>
    );
}
}

类类别扩展组件{
建造师（道具）{
超级（道具）；
此.state={
数据：[]，
类别数据：[]，
对象：[]，
对象：[]，
};
}
componentDidMount（）{
这是我的国家({
数据：data.Dluga，
categoryData:data.Dluga.basic，
对象：数据，
})
}
更改类别（事件）{
event.preventDefault（）；
这是我的国家({
categoryData:this.state.data[（event.currentTarget.textContent）.split（“”）[1]]，
});
}
变更对象（事件）{
event.preventDefault（）；
const objectOne=Object.assign（{}，this.state.objects[event.currentTarget.parentElement.parentElement.children[0].children[0].value]）；
这是我的国家({
对象：this.state.objects，
对象：对象一，
});
};
render（）{
返回(

{Object.keys（this.state.data）.map（（项）=>{
返回(

{item}

)})
}

);
}
}

---

当我用

changeObject

更新状态时，状态对象中有两个属性：

objects

和

object

，但最初是4个属性。。。接下来，当我用

changegority

更新状态时，我从

componentDidMount

中获得初始属性，并更新了

categoryData

，但

对象

为空。。。我无法在一个函数中更新状态，因为它有两个

onClick

元素。如何正确更新状态？

您错误地执行的主要操作是基于现有状态更新状态，而不使用回调版本的

setState

。状态更新可以是异步的，也可以组合（批处理）。无论何时设置从当前状态派生的状态，您都可以。例如：

请注意，我们正在向它传递一个函数，该函数稍后将被调用（只是稍晚，但稍后），并将获取当时作为参数传递给它的当前状态；我们将新状态作为返回值返回

当我用

changeObject

更新状态时，状态对象中有两个属性：

objects

和

object

，但最初是4个属性

这绝对正常。调用

setState

时，通常只指定状态属性的子集。实际上，

changeObject

应该是：

changeObject(event) {
    event.preventDefault();
    this.setState(prevState => {
        const objectOne = Object.assign({}, prevState.objects[event.currentTarget.parentElement.parentElement.children[0].children[0].value]);
        return { object: objectOne };
    });
}

请注意，我没有指定

对象：prevState.objects

。如果你不改变它，就没有理由这么做

接下来，当我使用

changegority

更新状态时，我从

componentDidMount

中获得初始属性，并更新了

categoryData

，但

对象

为空

---

对象

只有在某个时候设置为空时才会为空（无论“空”是什么意思）。我怀疑解决上述问题将解决此问题，但如果不能解决，并且如果您无法通过进一步调试解决此问题，我建议发布一个带有[mcve]的新的问题来演示此问题（您可以使用堆栈片段执行可运行的问题；）.

在

componentDidMount

中

数据

来自何处？还要注意，上面的语法错误会阻止它运行（

；

在

changeObject

的方法体末尾之后）。（如果这是您的真实代码，而您正在传输，而传输程序却让您逍遥法外，

；

，请向传输程序项目提交一个关于它的错误。）抱歉，但此组件没有多大意义。。。你能在沙箱里创建这个吗。。。比如codesandbox.io？

changeObject(event) {
    event.preventDefault();
    this.setState(prevState => {
        const objectOne = Object.assign({}, prevState.objects[event.currentTarget.parentElement.parentElement.children[0].children[0].value]);
        return { object: objectOne };
    });
}