为什么列表在更新商店后不重新呈现？

Question

我开始学习 mobx 但卡住了。为什么当我更改 listItems 时，List 没有重新呈现？

我有商店：

export const listStore = () => {
    return makeObservable(
        {
            listItems: [],
            addItem(text) {
                this.listItems.push(text);
            }
        },
        {
            listItems: observable,
            addItem: action.bound
        }
    );
};

将文本从输入添加到存储的组件：

const store = listStore();

export const ListForm = observer(() => {
    const [value, setValue] = useState();

    return (
        <>
            <input type="text" onChange={e => setValue(e.target.value)} />
            <button onClick={() => store.addItem(value)}>Add note</button>
        </>
    );
});

我有一个列表组件：

const store = listStore();

export const List = () => {
    return (
        <React.Fragment>
            <ul>
                <Observer>
                    {() => store.listItems.map(item => {
                        return <li key={item}>{item}</li>;
                    }
                </Observer>
            </ul>
            <ListForm />
        </React.Fragment>
    );
};

我不明白怎么了。貌似榜单没看店铺变化

codesandbox: https://codesandbox.io/s/ancient-firefly-lkh3e?file=/src/ListForm.jsx

Answer 1

您创建了 2 个不同的商店实例，它们之间不共享数据。只需创建一个单例实例，就像这样：

import { makeObservable, observable, action } from 'mobx';

const createListStore = () => {
  return makeObservable(
    {
      listItems: [],
      addItem(text) {
        this.listItems.push(text);
      }
    },
    {
      listItems: observable,
      addItem: action.bound
    }
  );
};

export const store = createListStore();

Working example

为什么列表在更新商店后不重新呈现？

Why the list doesn't re-render after updating the store?

reactjs

mobx

mobx-react