盡管 Parent 中的狀態發生了變化，但子組件不會重新渲染

Question

我有一個組件Shipping ，它有多個狀態變量，其中一個是一個名為count的對象。

// Example of count content:
{
    "CCI-250S1" : {"count" : 0, "expected" : 3000}
}

父組件Shipping將count作為道具傳遞給子組件：

<InventoryList
    items={this.state.items}
    isChecking={this.state.isChecking}
    count={this.state.count} />

仍然在Shipping中，有一個帶有onClick功能的按鈕：

async handlePartSubmit(event) {
    event.preventDefault();
    this.setState({'upc' : ''});

    let result = await SpireService.getItemByUPC(this.state.upc);
    let count = { ...this.state.count};
    let entry = count[result.partNo];
    let qty = 0;

    this.state.items.forEach(value => {
        if (value.inventory.partNo === result.partNo) {
            qty = value.committedQty;
        }
    });
    if (entry === undefined) {
        count[result.partNo] = {
            "expected" : Number.parseInt(qty),
            "count" : Number.parseInt(result.unitOfMeasures[result.uomCode].quantityFactor)
        }
    } else {
        entry.count += Number.parseInt(result.unitOfMeasures[result.uomCode].quantityFactor);
    }
    this.setState({'count' : count});
    return false;
}

因為我在父組件中調用setState({...}) ，根據我對 React 的理解，子組件應該重新渲染，因為狀態已經改變，但不會發生重新渲染。

這是子組件，特別是 Icon 不會像count中的值那樣改變。

getIcon(partNo) {
    if (this.props.isChecking) {
        let entry = this.state.count[partNo];
        if (entry === undefined) {
            return <td className="check red"><i className="bi bi-x-circle" /></td>;
        }
        if (entry.count === 0) return <td className="check orange"><i className="bi bi-dash-circle" /></td>
        if (entry.count === entry.expected) return <td className="check green"><i className="bi bi-check-circle" /></td>
        return <td className="check red"><i className="bi bi-x-circle" /></td>
    } else return "";
}

populateItemList() {
    return this.props.items.map((item) =>
        <tr key={item.id}>
            <td>
                {item.partNo}
            </td>
            <td>
                {item.orderQty}
            </td>
            <td>
                {item.backorderQty}
            </td>
            <td>
                {item.committedQty}
            </td>
            {this.getIcon(item.partNo)}
        </tr>
    );
}
// RENDER child component
render() {
    return (
        <Table  bordered hover>
            <thead>
                <tr>
                    <th>Part No.</th>
                    <th>Order Qty.</th>
                    <th>Backordered Qty.</th>
                    <th>To Ship</th>
                    {this.props.isChecking &&
                        <th>Checked</th>
                    }
                </tr>
            </thead>
            <tbody>
                {this.populateItemList()}
            </tbody>
        </Table>
    );
}

所以我的問題是為什么當count狀態改變時子組件不會重新渲染？

Answer 1

populateItemList() {
    return this.props.items.map((item) =>

應該：

populateItemList() {
    return this.state.items.map((item) =>

Answer 2

通過確保我在getIcon()中讀取this.props.count而不是this.state.count ，我能夠正確更新內容