Использование карты ES6 с React и MobX не отображает все изменения

Question

Я нахожусь в процессе изучения mobx и пытаюсь сделать что-то, что мне кажется довольно простым ... У меня есть объект Map в моем магазине и я создал действие findOrCreate, но не похоже, что mobx запускаетповторяет в некоторых случаях.

Я создал здесь пример: https://codesandbox.io/s/0y1v181z1v

Сначала я записываю размер карты, который начинается с 0, затем вызываю метод findAndCreate, записываю созданный объект, а затем вызываю size,Следующий вызов размера правильно отражает изменение, но первоначальный вызов по-прежнему показывает 0. После нажатия кнопки «Добавить элемент» и добавления другого элемента оба размера правильно отражают количество элементов на карте.

-

Чтобы уточнить один из комментариев, я использую поиск или создание в рендере, потому что поля формы в моем реальном проекте существуют в зависимости от реквизитов, передаваемых родителю.Существует несколько различных «типов» форм, которые все визуализируются одним компонентом, и поля создаются в зависимости от нескольких разных реквизитов.Предложение создать их в методе componentDidMount действительно, но что если бы я использовал SFC?https://codesandbox.io/s/k10jylk1y3

Answer 1

С React вы не должны и не должны устанавливать setState (или хранить) в render ().

Предложение создать их в методе componentDidMountдопустимо, но что, если бы я использовал SFC

Если вы хотите использовать методы жизненного цикла, вам нужно использовать компоненты Statefull или Class React Hooks (с 16.8)

Пример компонента класса от @ Tholle

https://codesandbox.io/s/zk8r04l16l

Пример подключения в SFC / FunctionComponent

const App: React.FunctionComponent = observer(({ store }) => {
    React.useEffect(() => {
       store.findOrCreateItem("test");
    }, []);
    return (
            <div>
                <div>ittr items</div>
                {Array.from(store.map$).map(([key, value]) => (
                    <div key={key}>
                        item[{key}]: {value}
                    </div>
                ))}
                <div>store.size: {store.map$.size}</div>
                <div>
                    <button onClick={store.addItem}>add item</button>
                </div>
            </div>
    );
});