使用兩個功能更新狀態，無法正確更新組件

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的回調版本。 狀態更新可以是異步的，也可以組合（分批）。 每當您設置從當前狀態派生的狀態時，都必須使用回調形式 。 例如：

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將object為空，則該object將僅為空（無論“空”是什么意思）。 我懷疑解決上述問題可以解決此問題，但是如果不能解決，並且如果您無法通過進一步的調試來解決它，我建議發布一個新問題，並用[mcve]演示該問題（您可以使用Stack做一個可運行的問題片段； 方法如下 ）。