React / MobX组件在状态更改后未重新呈现（找到了一个怪异的解决方案，想知道原因）

Question

我有一个带有MobX的React.js应用，用于状态管理。这是ItemStore类：

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

App.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中添加可观察到的“ items”：

const { items, loadItems } = itemStore;

Boom，ItemList在单击按钮时会重新加载项目！

但是我知道情况并非如此，因为在编译时会发出警告

第11:11行：'items'被分配了一个值，但从未使用过

而且，在我所指的教程源代码中，整个解构过程被省略了，App组件中没有任何东西可以直接与项目进行交互。

我将观察者置于所有组件中，因此它们可以对状态更改做出反应。我真的很想知道是什么导致状态更改后未重新呈现ItemList，以及为什么在理论上不重要的情况下，为什么在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组件能够'观察'并将状态更改应用于自身，需要将其导出为以该组件为参数的高阶观察者函数：

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

export default observer(RandomComponent);

在上面的示例组件中，我通过指定也可以导出非观察者的RandomComponent来宽容错误。当我导出RandomComponent而不是observer（RandomComponent）时，我导出的组件版本无法“观察” MobX状态更改。

我的错误是像上面那样保留组件并导出{RandomComponent}而不是默认的导出。

我希望我是唯一犯此错误的新手，但希望任何人都可以找到这个有用的：D