Javascript 如何在react render中显示而不重新渲染，自动更改mobx store实例的值？

如何拉入mobx类的实时属性

我制作了一个mobx商店的实例，在其中我计算年份和天数 有几个行星。 每个行星都是使用PlanetStore函数的实例 使用setInreval，可增加天数和年份。 我列出了所有的例子

现在，我想在react mobx componenet中实时显示这些年和日的变化。但是，它是不可见的。我该怎么做

@observer
class Calendar extends Component{

    render(){
        let planets = planetStore.Planets *just getting names of planets not relevant
        let planetArr=[]
        for(let i=1; i<planets.length; i++){
            let key= Object.keys(planets[i])
            planetArr.push(key)
        }
        this.planets=planetArr
        planets.forEach(e=> calanderStore.loadPlanets(e))
        console.log(planetArr)
       console.log(calanderStore.list)
       calanderStore.showPercent()       
        return (
        <div id='calendar'> {this.planets.map((planet, index) => <Cal planet={planet} key={index}/> )} </div> )       
    }

}

export default Calendar

@observer
类Cal扩展组件{
建造师（道具）{
超级（道具）
this.state={rerender:'}
this.planetName=this.props.planet
此.currentPrecent=0
这个.dayCounter=0
this.yearCounter=-1
}
render（）{
让planet=this.props.planet
**在这里，我从下面我在卡兰达制作的实例列表中选取这个星球**
dayCounter=JSON.parse（JSON.stringify（calanderStore.list[planetIndex].dayCounter））
console.log（dayCounter）
让yearCounter=planet.yearCounter
返回(
**正在更新实例
{dayCounter}但在这里没有观察到
{calanderStore.list[planetIndex].yearCounter}

类存储{
@可观察列表=[]*实例列表*
@行动载荷行星=（行星名称）=>{
console.log（planetName）
planetName=JSON.parse（JSON.stringify（planetName））
planetName=Object.keys（planetName）
console.log（planetName）
让ifexist=this.findPlanetFromList（planetName）
如果（ifexist.length==0）{
让newPlanet=CalendarItem.makeInstnace（planetName）
返回此.list.push（newPlanet）
}
}
@操作显示百分比=（id）=>{
console.log（“现在进行Calander测试”）
this.list.forEach（id=>{
id=JSON.parse（JSON.stringify（id））
let index=planetStore.findPlanetIndex（id.planetName）
让test=planetStore.Planets[index][id.planetName].animationDuration['animation-duration']
测试=测试。替换（'s'，'0'）
test=parseInt（测试）
console.log（测试）
让setTimer=（id）=>{
//id=id[0]
//planetName=id[0]。planeName
//id=JSON.parse（JSON.stringify（id））
如果（id.currentPrecent<100）{
控制台日志（id）
id.currentPrecent+=1；
id.dayCounter=Math.round（id.currentPrecent*planetStore.Planets[index][id.planetName].daysInyear/100）
}
否则{
id.currentPrecent=0
id.dayCounter=0；
id.yearCounter+=1；
console.log（id.dayCounter）
}
}
//让getanimationduration=this.getanimationduration
//让totalDuration=getanimationduration（planetName）
设置间隔（（）=>{
设置计时器（id）}，测试）；
})
}

是的，您可以控制组件是否应该更新，因为存在react component类的函数

shouldComponentUpdate ( nextProps, nextState, nextContext ) {
    /* compare nextState with your current states properties if you want to update on any basis return true if you want to render the component again  */
    return true; // will re-render component , 
    return false; // do not re-render component even if you change component states properites
}

---

是的，您可以控制组件是否应该更新。存在react component类的函数

shouldComponentUpdate ( nextProps, nextState, nextContext ) {
    /* compare nextState with your current states properties if you want to update on any basis return true if you want to render the component again  */
    return true; // will re-render component , 
    return false; // do not re-render component even if you change component states properites
}

---

我不太确定你的代码是怎么回事，但我注意到你在

@action

中使用了

setInterval

Mobx操作仅适用于当前堆栈，

setTimeout

，

Promise

，

setInterval

中的代码不在同一堆栈中运行。 Mobx具有编写异步代码的特殊功能

---

我不太确定您的代码是怎么回事，但我注意到您在

@操作中使用了
setInterval

Mobx操作仅适用于当前堆栈，
setTimeout
，
Promise
，
setInterval
中的代码不在同一堆栈中运行。
Mobx具有编写异步代码的特殊功能

nextProps包含支持新道具的属性，nextState包含支持新道具的属性，nextState包含支持新道具的属性，nextState包含支持新道具的属性，nextState包含支持新道具的属性，nextState包含支持新道具的属性，nextState包含支持新道具的属性，nextState包含支持新道具的属性，nextState包含支持新道具的属性，但我使用MOBX，此方法无效谢谢，通过设置在rendreing componenet中设置SetInterval以调用action-setimerTanks，通过在rendreing componenet中设置SetInterval以调用action-setimer修复了此问题
class CalanderStore {
@observable list=[] *list of instances*

@action loadPlanets=(planetName)=>{
            console.log(planetName)
            planetName=JSON.parse(JSON.stringify(planetName))
            planetName=Object.keys(planetName)
            console.log(planetName)
            let ifexist=this.findPlanetFromList(planetName)    
            if(ifexist.length==0){        
          let newPlanet=CalendarItem.makeInstnace(planetName)

           return this.list.push(newPlanet)
            }
              }

 @action  showPercent= (id)=> {
          console.log("Calander test now")   
          this.list.forEach(id=>{
                id=JSON.parse(JSON.stringify(id)) 
                let index=planetStore.findPlanetIndex(id.planetName)
          let  test=planetStore.Planets[index][id.planetName].animationDuration['animation-duration']

               test=test.replace('s','0')
               test=parseInt(test)
               console.log(test)
            let setTimer=(id)=>{
              // id=id[0]
              // planetName=id[0].planeName

              // id=JSON.parse(JSON.stringify(id))

              if (id.currentPrecent < 100) {
                console.log(id)
                id.currentPrecent += 1;  
                id.dayCounter=Math.round(id.currentPrecent*planetStore.Planets[index][id.planetName].daysInyear/100)      
              }
              else {
                id.currentPrecent=0
                id.dayCounter=0;
                id.yearCounter+=1;
                console.log(id.dayCounter)
              }
            }
            // let getanimationduration=this.getAnimeDuration
            // let totalDuration = getanimationduration(planetName)
              setInterval(() => {
              setTimer(id)}, test);

          })
        }


shouldComponentUpdate ( nextProps, nextState, nextContext ) {
    /* compare nextState with your current states properties if you want to update on any basis return true if you want to render the component again  */
    return true; // will re-render component , 
    return false; // do not re-render component even if you change component states properites
}