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个属性...当我用{{更新状态时1}}我有来自changeCategory的初始属性并已更新componentDidMount但categoryData为空...我无法在一个函数中更新状态，因为它是两个{ {1}}元素。我该怎么做才能正确更新状态？

Answer 1

您不正确的主要做法是根据现有状态更新状态，而不使用setState的回调版本。状态更新可以是异步的，可以组合（批处理）。每当您设置从当前状态派生的状态时，您must use the callback form。 E.g：

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

请注意，我们正在向它传递一个函数，该函数稍后将被称为（仅稍后，但稍后），并将当时的状态传递给它参数;我们将新状态作为返回值返回。

当我使用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 };
    });
}

请注意，我没有指定objects: prevState.objects。如果你没有改变它，没有理由。

接下来，当我使用changeCategory更新状态时，我的componentDidMount初始属性已更新categoryData，但object为空。

object只会是空的（无论＃34;空＆＃34;表示），如果你在某个时候设置它。我怀疑解决上述问题会解决这个问题，但如果没有，如果你无法通过进一步的调试来解决这个问题，我建议用[mcve]发布新的问题来证明这个问题（你可以用Stack Snippets做一个可运行的; here's how）。

使用两个函数更新状态，不正确更新组件

1 个答案: