После обновления состояния в MobX реагируют не на рендеринг - PullRequest
Новая
       5

После обновления состояния в MobX реагируют не на рендеринг

0 голосов
/ 06 февраля 2020

У меня проблема с реакцией и мобом.

Действие отправки кода каждую 1 секунду, и после отправки ничего не происходит.

Вот мой код: 

import React from 'react';
import { action, observable } from "mobx"
import { observer } from "mobx-react"

const COLORS = [
    'blue',
    'yellow',
    'brown',
    'green'
]

const nextColor = (key) => {
    if (key !== undefined && key + 1 < COLORS.length) {
        return key + 1
    }
    return 0
}

const store = observable({
    circles: observable.map({}),
    getColorId(name) {
        return store.circles.get(name)
    },
    update: action(function update(name) {
        store.circles.set(name, nextColor(store.getColorId(name)))
    })
})


const OX = 100

function AppMobX() {
    const circles = []
    for (let i = 0; i < OX; i++) {
        circles.push(<CircleContainer key={i} name={i}/>)
    }
    setInterval(() => {
        store.update(Math.ceil(Math.random() * OX))
    }, 1000)
    return (
        <div className="app">
            {circles}
        </div>
    );
}

const Circle = ({colorId}) => {
    return <div style={{ backgroundColor: COLORS[colorId] }} className="circle"/>
}

const CircleContainer = observer((name) => {
    return <Circle colorId={store.getColorId(name)}/>
})

export default AppMobX;
...