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