React/MobX 組件在 state 更改后沒有重新渲染（找到了一個奇怪的解決方案，想知道為什么）

Question

我有一個帶有 MobX 的 React.js 應用程序，用於 state 管理。 這是 ItemStore class：

class ItemStore {
    @observable items: IItem[] = []

    @action loadItems = () => {
        this.items = [
            {
                name: 'BeyBlade',
                category: 'Toy',
                amount: 5
            },
            {
                name: 'Legos',
                category: 'Toy',
                amount: 10
            },
            {
                name: 'Coka Cola',
                category: 'Food',
                amount: 8
            },
            {
                name: 'Gummy Bears',
                category: 'Food',
                amount: 13
            }

        ]
    }
}

export default createContext(new ItemStore());

應用程序.tsx：

function App() {

  const itemStore = useContext(ItemStore);
  const { loadItems } = itemStore;

  return (
    <Fragment>
      <Container>
        <Button content='Load Items' onClick={() => loadItems()} />
        <ItemList />
      </Container>
    </Fragment>
  );
}

export default observer(App);

當按下按鈕時，“loadItems”動作運行並填充“items”可觀察對象，並且 ItemList 組件重新渲染以展示項目。 當我按下按鈕時出現問題。 在 MobX 開發工具中，您可以清楚地看到四個項目已成功加載，但 ItemList 不會重新渲染。 但是，如果我像這樣在解構的 itemStore 中添加可觀察的“項目”：

const { items, loadItems } = itemStore;

繁榮，當單擊按鈕時，ItemList 會重新加載項目！

但我知道這不應該是這樣，因為編譯時它會發出警告

第 11:11 行：“items”被賦值但從未使用過

而且，在我所指的教程源代碼中，整個解構被省略了，App 組件中沒有任何東西直接與項目交互。

我在所有組件中都放置了觀察者，因此它們可以對 state 的更改做出反應。 我真的很想知道是什么導致 ItemList 在 state 更改后無法重新渲染，以及為什么在 App.tsx 中明確引入可觀察到的“項目”解決了這個問題，而理論上這無關緊要。

謝謝大家，保持安全和快樂！

編輯 - - - - - - - - - - - - - - - -

這里也是 ItemList.tsx，謝謝：

export const ItemList = () => {

    const itemStore = useContext(ItemStore);
    const {items} = itemStore;

    return (
        <Segment clearing>
            <Item.Group divided>
                {items.map(item => (
                    <Item key={item.name}>
                        <Item.Content>
                            <Item.Header>{item.name}</Item.Header>
                            <Item.Description>
                                Category: {item.category}, Amount: {item.amount}
                            </Item.Description>
                        </Item.Content>
                    </Item>
                ))}
            </Item.Group>
        </Segment>
    )
}

export default observer(ItemList);

Answer 1

用頭撞牆兩天的腦震盪代價，我找到了原因！

為了讓（功能性）React 組件能夠“觀察”並將 state 更改應用於自身，它需要作為以組件為參數的高階觀察者 function 導出：

export const RandomComponent = () => {
    return (
        <div>Hello world!</div>
    )
}

export default observer(RandomComponent);

在上面的示例組件中，我通過指定也可以導出非觀察者 RandomComponent 來允許犯錯。 當我導出 RandomComponent 而不是觀察者（RandomComponent）時，我正在導出無法“觀察” MobX state 更改的組件版本。

我的錯誤是像上面一樣離開組件並導出 { RandomComponent } 而不是默認導出。

我希望我是唯一犯這個錯誤的新手，但希望有人覺得這很有用：D