javascript - 使用两个函数更新状态，无法正确更新组件

Question

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

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>
    );
}
}

当我使用 changeObject 更新状态时，状态对象中有两个属性:objects 和 object，但最初它是 4 个属性。接下来，当我使用 changeCategory 更新状态时，我具有来自 componentDidMount 的初始属性并更新了 categoryData 但 object 为空。 .. 我无法更新一个函数中的状态，因为它是两个 onClick 元素。我应该怎么做才能正确更新状态？

Answer 1

您错误执行的主要操作是根据现有状态更新状态，而不使用 setState 的回调版本。状态更新可以是异步的，也可以组合(批量)。每当您设置从当前状态派生的状态时，您must use the callback form 。例如:

changeCategory(event) {
    event.preventDefault();
    this.setState(prevState = > {
        return {
            categoryData: prevState.data[(event.currentTarget.textContent).split(' ')[1]]
        };
    });
}

请注意，我们向它传递了一个函数，该函数将在稍后被调用(仅稍后一点，但稍后)，并将获取当时的状态作为参数传递给它;然后我们将新状态作为返回值返回。

When I update state with changeObject I have in state object two properties: objects and object, but initially it was 4 properties...

这绝对是正常的。调用 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 };
    });
}

请注意，我没有指定objects: prevState.objects。如果您不更改它，就没有理由。

Next when I update state with changeCategory I have initial properties from componentDidMount and updated categoryData but object is empty.

如果您在某个时刻将其设置为空，则

object 只会为空(无论“空”意味着什么)。我怀疑解决上述问题将解决此问题，但如果不能，并且如果您无法通过进一步调试解决问题，我建议发布一个新问题，并用 [mcve] 演示该问题(您可以使用 Stack Snippets 进行可运行的操作；here's how )。